Deploying React App with Yarn on Apache Server, CentOS 7 ( Oracle Linux 7 )
Tags: react, apache, centos7, deployment
Published: 2021-01-12 15:51:52

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](https://www.digitalocean.com/community/tutorials/how-to-install-the-apache-web-server-on-centos-7) article. )
 * You have *Git* installed in your CentOS 7. ( If you don't have it installed you can follow [this](https://www.digitalocean.com/community/tutorials/how-to-install-git-on-centos-7) article. )
 * You have *Yarn* installed in your CentOS 7. ( If you don't have it installed you can follow [this](https://classic.yarnpkg.com/en/docs/install/#centos-stable) 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](https://linkedin.com/in/adnanazmee)
- Twitter - [@AzmeeAdnan](https://twitter.com/AzmeeAdnan)

 or give some ♥ on [mail](mailto:adnanazmee@gmail.com).