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 update2$ sudo apt-get install apache2
Install Vim for editing content
1$ sudo apt-get install vim
install Nodejs
1$ sudo apt-get install curl2$ 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.com3 ServerAlias www.domain.com4 ServerAdmin [email protected]5 DocumentRoot /var/www/html/project/build6<Directory /var/www//html/project/build>7 Options Indexes FollowSymLinks8 AllowOverride all9 Require all granted10 </Directory>11ErrorLog ${APACHE_LOG_DIR}/example.com-error.log12 CustomLog ${APACHE_LOG_DIR}/example.com-access.log combined13</VirtualHost>
enable configuration
1$ sudo a2ensite domain.com.conf2$ 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 public2$ 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 -MultiViews2RewriteEngine On3RewriteCond %{REQUEST_FILENAME} !-f4RewriteRule ^ 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…
Follow me on Twitter
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.