DEV Community

loading...
Cover image for Deploying React App with Yarn on Apache Server, CentOS 7 ( Oracle Linux 7 )

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

Adnan Azmee
I am a Full Stack Software Developer and machine-learning enthusiast. I am passionate about technologies and love to learn new things.
・3 min read

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 command 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
Enter fullscreen mode Exit fullscreen mode

Go inside your project directory and run the command yarn.

cd YourReactApp
yarn
Enter fullscreen mode Exit fullscreen mode

After running the command you will see something like this.

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

Run the command yarn build

yarn build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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

sudo cp -rf build /var/www/html/build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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

sudo systemctl start httpd
Enter fullscreen mode Exit fullscreen mode

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

sudo systemctl status httpd
Enter fullscreen mode Exit fullscreen mode

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
...
Enter fullscreen mode Exit fullscreen mode

Enjoy !!!

📫 Get in touch

or give some ♥ on mail.

Discussion (0)