This guide describes how to set up a react website hosted on a Ubuntu server.
Assumptions:
Assuming this is a fresh install of Ubuntu we need to install nodejs and npm for a React website. When installing nodejs it's important to install the version that matches your development environment.
Use this more advanced guide from Digital Ocean to install node and npm or use these commands. After installation, check the major version number matches your dev environment.
sudo apt update
sudo apt install nodejs
sudo apt install npm
node -v
Open the firewall ports 80 and 443 needed for the website.
sudo ufw allow http
sudo ufw allow https
If the Ubuntu server is a VM running in AWS, Asure, or another cloud provider you will need to open the same port on the network connection to your server.
Next will make two directories. One for temporarily storing the website from git and the other for the built website to be served from.
sudo mkdir -p /srv/web/my-site
sudo mkdir -p /var/git
There are two to accompalish this.
WinSCP is a Secure FTP client that will make it easy to copy the website files to the server.
Navigate to the git directory. From here clone your repo. If your repo is private you will need to enter your creds.
cd /var/git
sudo git clone https://github.com/UserName/my-site.git
Navigate into the cloned directory. Now use npm to install the required packages for your site, then build to produce the prod-ready files.
cd /var/git/my-site
sudo npm install
sudo run-script build
Move the built files to the chosen directory.
mv /var/git/my-site/build/* /srv/web/my-site
Caddy is a web server that is simple to set up and provides automatic TLS cert handling built-in. The below will install Caddy. Here is a link to Caddy's own install guide.
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy
Update the Caddyfile using the nano text editor.
sudo nano /etc/caddy/Caddyfile
Modify this config to match your domain and directory location.
www.my-domain.com {
redir https://my-domain.com{uri}
}
my-domain.com {
root * /srv/web/my-site
try_files {path} /index.html
file_server
encode gzip zstd
}
The first part of the config is a redirect from www.my-domain.com to the non-www version. I personally feel the www takes up extra space and is not needed. If you feel the same keep the redirect, otherwise get rid of it.
The Caddy install comes with a pre-configured service. Enable and start the service. Then check that it's running.
sudo systemctl caddy enable
sudo systemctl caddy start
sudo systemctl caddy status
Caddy must first adapt the Caddyfile you made, then we can start the web server.
caddy stop
sudo caddy adapt --config /etc/caddy/Caddyfile
sudo caddy run --config /etc/caddy/Caddyfile
If you make any changes to the Caddyfile the reload command will update Caddy with the new config without having to restart Caddy.
sudo caddy reload --config /etc/caddy/Caddyfile
Sign in to the website you bought your domain name from. There should be a DNS config somewhere. You will also need the IPv4 / IPv6 address of your server.
Add an A record to the DNS config with your server's IP address. Use an AAAA record for IPv6 addresses.
DNS can sometimes take a few minutes to propagate, otherwise, your site should be online!
Inevitably, you will want to push changes to your website. Here are the commands.
cd /var/git/my-site/
sudo git pull
sudo npm run-script build
sudo rm -r /srv/web/my-site/*
sudo mv * /srv/web/my-site/