Deploy React Application on Ubuntu Apache

Hello Friends,

are you find steps to deploy react applications on the ubuntu server with setup guide? Then you are right page. let’s start

In this article, we set up a ubuntu server with a react environment, learn the react build process, and figure out some issues like after build getting a blank page, etc.

Setup Ubuntu Server

Install Apache

$ sudo apt-get update
$ sudo apt-get install apache2

Install Vim for editing content

$ sudo apt-get install vim

install Nodejs

$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install -y nodejs

• Check Version

$ nodejs -v

Setup Virtual Host

Create Virtual host conf file

$ cd /etc/apache2/sites-available/
$ sudo vim domain.com.conf

replace your details

<VirtualHost *:80>
    ServerName domain.com
    ServerAlias www.domain.com
    ServerAdmin webmaster@domain.com
    DocumentRoot /var/www/html/project/build
<Directory /var/www//html/project/build>
        Options Indexes FollowSymLinks
        AllowOverride all
        Require all granted
    </Directory>
ErrorLog ${APACHE_LOG_DIR}/example.com-error.log
    CustomLog ${APACHE_LOG_DIR}/example.com-access.log combined
</VirtualHost>

enable configuration

$ sudo a2ensite domain.com.conf
$ sudo a2enmod rewrite

check apache configuration if return syntax ok then you are going perfect

$ sudo apachectl configtest

restart apache server

$ sudo systemctl restart apache2

React Build Configuration

Go To Your project folder

$ cd /var/www/html/project/

add homepage URL on your project package.json file

$ sudo vim package.json

• if you didn’t add then you get blank output after build project

“homepage”: “https://domain.com/",

add .htaccess file on your project public folder

$ cd public
$ sudo vim .htaccess

• if you didn’t create htaccess with right content then only work your default URL and getting refresh and back issue after build add content on your .htaccess

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

Go To Your project folder and build project

$ cd ..

before building project please all packages install successfully or not except you get a build error

$ sudo npm run build

Thanks for reading…