Upload a react website on webserver

[MLangeEU]

Body

Hello, I have started to learn JS and React. Now I want to upload these files to my web server.
The problem I'm having is that every time I upload the files and try to connect to my website, I get a 403 Forbidden error.

Now I'm a little confused. I already tried giving the files higher permissions but it didn't work, I also tried changing the htaccess.
Is this a permission problem or a file problem.

If this is a file problem:
I do not have an index.html. I have seen a tutorial where it works without .html files.
I have an idea, but I'm not sure if this will work.

• I install npm on the server, start the live server in a tmux seassion.

I don't have much experience with JS and servers.

Translated with DeepL.com (free version)

Guidelines

• I have read and understood this category's guidelines before making this post.

[tpmst]

It sounds like you're encountering a common issue related to web server configuration and file permissions, especially if you're not seeing the results you expect after uploading your JavaScript and React files.

Check for an Index File

Most web servers, including Apache and Nginx, expect an index.html or index.php file as the default file to serve when a directory is accessed. If it doesn't find this file, it might return a 403 Forbidden error depending on the server configuration.

Solution

Ensure that you have an index.html file in your root directory or configure your server to recognize another default file.

.htaccess Configuration

An incorrect configuration in .htaccess can also cause a 403 error. Ensure that your .htaccess file is correctly configured. Here’s a basic example of what it might look like:

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

This configuration ensures that if the requested file or directory doesn't exist, the request is redirected to index.html, which is common in single-page applications (like those built with React).

[MLangeEU]

Thank you very much. I didn't work with this method the way I wanted to, but it helped a lot.

[im-shubh]

It sounds like the 403 Forbidden error you're encountering could be related to a couple of common issues:

1. Permissions
Make sure the permissions on the server allow public access to the directory. If using Linux, the files should typically have at least 644 permissions (chmod 644 filename) and the directories 755 (chmod 755 directory). However, setting higher permissions like 777 is not recommended for security reasons.

2. Web Server Configuration

No index.html file: If your project is built with React, it usually generates a single index.html file in the build or dist folder. If you directly upload the React project (without building it), there might not be an index.html file to serve, leading to the 403 error.
To fix this, try running npm run build in your project to generate the production-ready files and upload the build directory to your server.
Ensure your .htaccess or web server is configured to serve the index.html in case it’s missing or not explicitly stated.

3. Live Server on NPM

Starting the live server in a tmux session could work for development purposes, but it is not recommended for production. Instead, deploy a static version of your site by building the React app as mentioned above and serving the static files.

Solution Steps:

On your local machine, run:

npm install
npm run build

This will generate a build folder with an index.html file inside it.

Upload the build folder to your server.

Ensure your server is configured to serve the index.html from the build folder.

If needed, configure your .htaccess file (if you're using Apache) to point to index.html as the default file.

[MLangeEU]

Thank you very much, that helped me a lot. Now my site is finally working.