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

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

Install Vim for editing content

1$ sudo apt-get install vim

install Nodejs

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

Check Version

1$ nodejs -v

Setup Virtual Host

Create Virtual host conf file

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

replace your details

1<VirtualHost *:80>
2    ServerName domain.com
3    ServerAlias www.domain.com
4    ServerAdmin [email protected]
5    DocumentRoot /var/www/html/project/build
6<Directory /var/www//html/project/build>
7        Options Indexes FollowSymLinks
8        AllowOverride all
9        Require all granted
10    </Directory>
11ErrorLog ${APACHE_LOG_DIR}/example.com-error.log
12    CustomLog ${APACHE_LOG_DIR}/example.com-access.log combined
13</VirtualHost>

enable configuration

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

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

1$ sudo apachectl configtest

restart apache server

1$ sudo systemctl restart apache2

React Build Configuration

Go To Your project folder

1$ cd /var/www/html/project/

add homepage URL on your project package.json file

1$ sudo vim package.json

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

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

add .htaccess file on your project public folder

1$ cd public
2$ 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

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

Go To Your project folder and build project

1$ cd ..

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

1$ sudo npm run build

Thanks For Reading…

Deploy React Application on Ubuntu Apache

Setup Ubuntu Server

Setup Virtual Host

React Build Configuration

Looking For React Native Tutorial?

Join our email list and get notified about new content

More articles from Infinitbility

About

Contact