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 [email protected]
    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…