Deploying a React App on Linux based Server

Step 1. Creating a React App

Install Create React App with the following command:

npm install -g create-react-app

Run this command to create a new app called my-reactapp:

npx create-react-app my-reactapp

Step 2. Reconfigure package.json.

Go to the specified directory with the help of the following command.

cd my-reactapp

Add the following line to your package.json file:

"homepage": "http://yourdomain.com"

File content looks like below:
--------------------------------------------------
{
"name": "my-app",
"homepage": "http://yourdomain.com",
"version": "0.1.0",
"private": true,
…………….
…………....
---------------------------------------------------
Note: please replace the domain name with your IP address or domain name if you have one.

Step 3. React App Build.

npm run build

Now create the file with name .htaccess and add the following line, I mentioned below:

FallbackResource ./index.html

Now you have created the build for your react app, Now the build is ready to deploy.

Step 4. Deploying the React App

Now, We are ready to deploy our app, we need to Upload each file from our build folder into the Document Root folder. For this, you can use any FTP client or you can also use a command-line utility like the SCP (Secure Copy) command.

Example Command of SCP:

scp /localpath/to/build ec2-user@hostname:/var/www/html

After the transfer of the code, please log in to your AWS ec2 machine and set the DocumentRoot according to your build folder name (I have mentioned the DocumentRoot path below where you have to edit in the apache configuration file.) after that hit the HomePage URL mentioned in package.json file, Now your React App will show home page.

DocumentRoot /var/www/html/FolderName

Note: If you want to deploy your React application to a subfolder of your Document Root, you must follow these steps.

Go to step no.2 and Add the following line to your package.json file:

"homepage": "https://yourdomain.com/FolderName"
Like below:
--------------------------------------------------
{
"name": "my-app",
"homepage": "https://yourdomain.com/FolderName",
"version": "0.1.0",
"private": true,
…………….
…………....
---------------------------------------------------

Now perform step no.3 and add the following line into the .htaccess file.
---------------------------------------------------------------
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /FolderName/index.html [L] FallbackResource ./index.html
---------------------------------------------------------------

Replace the “FolderName” with your folder name.