Navigate back to the homepage

Deploy React Application on Ubuntu Apache

Infinitbility
React, Ubuntu, Apache
August 17th, 2020 · 1 min read
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…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

About

About

Infinitbility is a tech blog created with the sole purpose of explaining complex tech in a simple and concise way thus creating value for budding developers out there.

January 1st, 2020 · 1 min read
Contact

Contact

Contact infinitbility for any suggestions/issues and we will try to implement/resolve them ASAP.

January 1st, 2020 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]