Deploy static Frontend pages the 2 ways

In this blog let’s discover how to deploy a front site with 2 methods

1 Using free services like cloudflare pages, vercel, …

In this blog i target on cloudflare pages ( If you read my blogs you already known Im a cloudflare fanboy :v ). These others services or platform like vercel the steps will be same so dont worry

Okey, let’s start. First, you need to push your front end project to git (github or gitlab etc…). Login to cloudflare dashboard using your account or create new one. https://dash.cloudflare.com/login

Then in cloudflare dashboard chose tab workers and pages then click the Create button

In create workers and pages site chose create pages and connect to github then chose the frontend repos you wish to deploy (cloudflare will ask github for the authorization just allow it)
After chose the repo setup build command and build output directory. Base on the frontend framework you use setup these params (Ussualy frontend frame work will have a build command to export a static production version with htlml css js files in a folder). Or you can select the preset frameworks. Here is an example to deploy a reactJs project using vite (https://vitejs.dev/)

Click save and deploy then wait a few minutes if no errors happens your sites will be deployed and have a custom domain look like this

https://<your-project-name>.pages.dev

Then you can add custom domain instead of using this demo domain name. Cloudflare also setup ci/cd in git so each time you push new code to the production branch(in this example is the master branch) the new deployment will be process. CI/CD deploy with few clicks CLOUDFLARE IS DA BEST 😀
Some times if you face some errors in first deployments try these workaround: remove the yarn.lock or packages-lock.json from the project then push to git again and you should ignore these files too.

The old school way: Using a VM

First, this method is not free. Hiring a VM to host FE quite overkill and unecessary. But if you still need to do it dues to some special reasons here is how we should do
We should use one VM to deploy multiple of FE sites using nginx proxy (save the money)
Let’s start. ssh to vm:

ssh <user>@<vm-ip>
#tips in linux if you  want to ssh without enter passsword multitime use this command
ssh-copy-id <user>@<vm-ip>

Then install the environnement for example a reactJs frontend need to install node here is how to install node 20x via nvm (node version manager)

curl -sL https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.bash_profile
nvm install  20
nvm use 20

Another problem is to run the project as a service (when you exit the ssh the frontend server is till running)
Best and simplest solution is use pm2 (other can be use screen)

sudo npm i -g pm2

then in your project folder create a server.sh file which contains the start fe server command something like this

vim serverr.sh
# in vim
npm start
# :wq  to save the file and exit vim

Then sudo chmod +x server.sh (to make this file executable) then

pm2 start  server.sh  # to  start  as a service
#  you  can check running serrver  via
pm2  status
# you can stop/delete by
pm2 stop server.sh # or pm2 stop <service_index>
pm2 delete server.sh # or pm2 delete <service_index>

Ok now if we visit VM_IP:frontend_port we shoud see our FE sites. If not try to setting firewalls to open ports this can be set via the VM provider sometimes via cmd

sudo ufw allow 3000 # or the port you chose

But ourfrontend site now dont have ssl so we can buy a domain and install certbot to gain a free SSL or we can transfer domain to cloudflare sites. So the cloudflare sites will auto proxy ssl for us. Then we just need to point A record of the domain to the VM IP.

Next step we use nginx to reverse proxy the pointed domain to our fe server in VM. By this way you can use one VM to deploy as many as FE pages as you want just points Domain names to VM IP and add the nginx reverse
How to install nginx and setup reversed proxy, read this: https://tsmc.info/devops-series-from-cloud-to-ground-part-1-my-first-time-deploy-a-web-to-aws-cloud-service/
And if you like you can read my full devops series too
Gud luck and thanks for reading
__CodingCat__