build or dist contents to the serverDo you have this amazing web app made using React or Vue 3 and you're wondering how you're going to show it to the world? Well if you have a VPS (Virtual Private Server) configured with Nginx, I will be able to show you how to do it.
sudo privileges (it is advisable to use a user account with sudo privileges rather than using the root user for this tutorial)Run the following command to generate a build folder which will contain the files necessary for your web application:
npm run build
You can preview your production build locally by running:
npm install -g serve
serve -s build
# -s flag means serve it in Single-Page Application mode
Similar to the react project, run the following command to generate a dist folder (For Vue projects, the production build is in a folder named dist and not build):
npm run build
You can preview your production build locally by running:
npm install -g serve
serve -s dist
If you do come across this error bash: serve: command not found, you may run the following command:
#for React project
npx serve -s build
#for Vue project
npx serve -s dist
#you can even specify the port to use by adding the -p flag followed by the port number
npx serve -s build -p 4000
build or dist contents to the serverFirst log into your server and create a folder/directory in the /var/www/ folder. Run the following commands:
user@server:~$ cd /var/www/
user@server:/var/www$ sudo mkdir web-app-name
# Replace 'web-app-name' with a suitable name for your web app
# Do not leave gaps in the folder/directory name, you can seperate the words using a dash '-'
You can use an FTP client such as WinSCP (if you're on Windows) to upload the contents of the build or dist folder to the directory we just created.
Alternatively you can clone the React/Vue app from your Github repository by doing the following:
user@server:/var/www$ cd /var/www/web-app-name
user@server:/var/www/web-app-name$ sudo git clone your-git-repository-url-goes-here
# Replace 'your-git-repository-url-goes-here' with your repository url
Move into the folder generated by the git clone command by running:
user@server:/var/www/web-app-name$ cd git-cloned-folder
# Replace 'git-cloned-folder' with the name of the folder created after cloning the project from github
Then run the following command after you install Node.js and npm in your server if you haven't.
user@server:/var/www/web-app-name/git-cloned-folder$ npm run build
Lastly, we make sure to move the contents of the build or dist folder into the /var/www/web-app-name/ folder we created. The following are the commands to run:
user@server:/var/www/web-app-name/git-cloned-folder$ sudo mv build/* /var/www/web-app-name/ #for React project
user@server:/var/www/web-app-name/git-cloned-folder$ sudo mv dist/* /var/www/web-app-name/ #for Vue project
You can delete the git folder created during cloning now by doing the following:
user@server:/var/www/web-app-name/git-cloned-folder$ cd ..
user@server:/var/www/web-app-name$ sudo rm -rf git-cloned-folder
Your /var/www/web-app-name folder should look similar to this, it doesn't have to be exact but the index.html file should be there:
#React app
user@server:/var/www/web-app-name$ ls
apple_icon.png favicon.ico manifest.json static
asset-manifest.json index.html robots.txt
#Vue 3 + Vite app
user@server:/var/www/web-app-name$ ls
assets favicon.ico index.html portfolio_images
#Vue 3 app
user@server:/var/www/web-app-name$ ls
css favicon.ico img index.html js
Now comes the fun part. This step assumes you already have Nginx installed on your server. If you haven't, you can visit the article I mentioned in the prerequisites.
conf.d approachI will add this approach later on.
sites-available sites-enabled approachIn my opinion, this approach is ideal if you want to host multiple websites (virtual hosts) on one server. Even if you have only one website you can still use this approach. Log into your server and create a sites-available file for your web app using the following command (here we are using nano text editor, you can use vim or any other editor if you'd like):
sudo nano /etc/nginx/sites-available/web-app-name
# Replace 'web-app-name' with a suitable name for your web app
# Do not leave gaps in the file name, you can seperate the words using a dash '-'
# Also, do not include any file extensions in the name
In this file, we add configurations for the site/web app and tell Nginx where our web app files are located. Add the following lines to the file in the open text editor:
server {
root /var/www/web-app-name; //this is where we stored our web app files and folders
index index.html; //we tell nginx that index.html is our root file
server_name yourdomain.com www.yourdomain.com; //replace 'yourdomain.com' with your domain name/ subdomain. If you don't want to include a subdomain e.g:'www.yourdomain.com' you can exclude it.
// server_name ip_address; //(if you don't have a domain name, replace ip_address with your server's IP Address)
error_page 404 /index.html; //here, we tell nginx that our web app has a 404 error page and it should look for it in our web app instead of displaying the default Nginx 404 page
location / {
try_files $uri $uri/ /index.html;
}
}
Press ctrl + s to save, then ctrl + x to close the file (using nano editor).
For those using vim editor, switch to command mode by pressing esc key followed by : (colon) key to open a prompt bar at the bottom left corner of the window then press x and enter to save and quit the file.
We can check that the file has no syntax errors by running the following command:
sudo nginx -t
This should be the output if everything is ok:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
Next we want to create a symlink for the vhost configurations (sites-available file) we just made so that Nginx can serve up the website/web app when requested. Run the following command:
sudo ln -s /etc/nginx/sites-available/web-app-name /etc/nginx/sites-enabled/
# Replace 'web-app-name' with the name you used to save the sites-available file
Anytime you want to change configurations for the web app, you just edit the sites-available file and the changes will automatically reflect in the sites-enabled file unless you removed the symlink between the two files.
Reload the Nginx service by running the following command:
sudo systemctl reload nginx.service
You can enter the domain name, subdomain or IP Address which you had set in the Nginx configurations in a browser's address bar to see if your web app is running fine.
I hope this post has helped you when deploying your web app. If you had any issues and need assistance or if I have made a mistake anywhere in this post or if you just want to tell me something, you can let me know in the comments section or send me an email here hello@brianmulaa.com.