Deploying React App with Yarn on Apache Server, CentOS 7 ( Oracle Linux 7 )

This article focuses on the deployment of React JS project built using yarn command on Apache Server at CentOS 7 ( Oracle Linux 7 ).

Prerequisites

• This tutorial assumes you have a working React JS project built using Yarn at your remote repository.
• You have Apache Web Server installed in your CentOS 7. ( If you don't have it installed you can follow this article. )
• You have Git installed in your CentOS 7. ( If you don't have it installed you can follow this article. )
• You have Yarn installed in your CentOS 7. ( If you don't have it installed you can follow this article. )

I recently created a React App using Yarn package manager on my Windows PC and deployed it on Apache Web Server at CentOS 7. During my deployment I couldn't find enough resources where they went through the whole process, that's why I am writing this article to help anyone in need.

At first, in your CentOS 7 go to the directory where you are planning to keep the project and download it from your remote repository using the Terminal. Here the name of the project is "YourReactApp".

git clone url_of_remote_repository/YourReactApp.git

Go inside your project directory and run the command yarn.

cd YourReactApp
yarn

After running the command you will see the following.

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
. 
.
[4/4] Building fresh packages...
Done in 535.39s.

Run the command yarn build

yarn build

After the build is done, you will see a folder a named "build" is created in your project directory. Inside the build folder, you need to create a ".htaccess" file.

cd build
nano .htaccess

Add the following code snippet in the ".htaccess" file and save it.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Now copy the "build" folder and paste it inside "/var/www/html".

sudo cp -rf build /var/www/html/build

After copying the file you need to modify the "httpd.conf" file. You can find it in " /etc/httpd/conf/" directory.

nano /etc/httpd/conf/httpd.conf

In the "httpd.conf" file find the line "ServerName" and add your DNS name or IP address. In "<Directory>" add your content directory , which is "/var/www/html/build" in this case. In addition, change the "AllowOverride None" to "AllowOverride All" and save the file.

<Directory "/var/www/html/build">
    ...
    AllowOverride All
    ...
</Directory> 

Great! You are done with your configuration, now run the server with the following command :

sudo systemctl start httpd

You can see the status of your server with the following command.

sudo systemctl status httpd

When the server is running you will see active status.

Output
Redirecting to /bin/systemctl status httpd.service
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; enabled; vendor preset: disabled)
   Active: active (running) since Wed 2019-02-20 01:29:08 UTC; 5s ago
     Docs: man:httpd(8)
           man:apachectl(8)
 Main PID: 1290 (httpd)
   Status: "Processing requests..."
   CGroup: /system.slice/httpd.service
           ├─1290 /usr/sbin/httpd -DFOREGROUND
           ├─1291 /usr/sbin/httpd -DFOREGROUND
           ├─1292 /usr/sbin/httpd -DFOREGROUND
           ├─1293 /usr/sbin/httpd -DFOREGROUND
           ├─1294 /usr/sbin/httpd -DFOREGROUND
           └─1295 /usr/sbin/httpd -DFOREGROUND
...

Enjoy !!!

📫 Get in touch

• LinkedIn - Adnan Azmee
• Twitter - @AzmeeAdnan

or give some ♥ on mail.