Hosting a vite project on cloud

I recently discovered working with vite. vite is a build tool that makes development easy and faster by serving locally during development and bundle your javascript css and other assets together for production. So cool right?
From a react standpoint, I was used to:

npx create-react-app dut-project
cd dut-project
npm start

And your server is up and running.

After running the npx create-react-app dut-project, the build process(You need to be patient as this happens). The command generates 3 folders and 4 files i.e. node_modules, public and src folders with the files being .gitignore, package.json, README.md and package.lock.json. In this process,
Babel transforms the code by adding polyfills which makes your ES2015+ code work with older bowsers.
ESlint is a linter that scans your code against a set of rules and warns you if any rule is violated. There is a lot that happens that we won't delve much into.
The key features of using Create react app are:

1. It uses webpack and Babel to bundle the code, that is, the code needs to finish building step by step before you can make changes on the code.
2. Create react app provides room for customization especially beneficial when running larger and more complex projects.

Cloud Deployment
I am not going to mention how to do this on cpanel since it's pretty straightforward.
In this guide, my preffered cloud environment is linode.
I am assuming you have already linked your domain to linode

ssh into your server

ssh user@ip-address/domain

Once you are logged in, you can install all the required prerequisites like nginx/apache, nodejs, certbot and pm2. You can easily find guide on how to install each of the above mentioned. I preffer using nginx.

Modify your sites-available to indicate the directory linked to the domain and also where your pm2 logs are going to be accessible.
sudo vim /etc/nginx/sites-available/dutdavid.com

Paste the following and modify according to how you set up your environment

server {

        root /var/www/dutdavid.com/portfolio;
        index index.html index.htm index.nginx-debian.html;

        server_name dutdavid.com;
        access_log /var/log/nginx/nodeapp.log;
        error_log  /var/log/nginx/nodeapp-error.log error;

        location / {
        proxy_pass http://x.x.x.x:xxxx; //indicate IP and port 
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        }

Save and test if the changes you made are 'accepted' by nginx
sudo nginx -t
Restart nginx
sudo systemctl restart nginx
The next step would be to install certbot to enable ssl on your domain
sudo certbot --nginx -d dutdavid.com

That is mandatory process for deploying any static project on linode
Now to make a react project visible on that domain, we will need pm2
Assuming you have already installed pm2,
create ecosystem.config.js file
you can also initialize it. It should look like this

module.exports = {
  apps : [{
    name :"portfolio",
    script : "npm start",
    error_file : "./pm2-error.log",
    out_file : "./pm2-out.log",
  }]
}

To get it started, you simply run
pm2 start ecosystem.config.js

These are other commands you can use on pm2

pm2 logs //view logs
pm2 dlush // clear logs
pm2 startup ubuntu // keep pm2 running even on reboot
pm2 kill // kill pm2 instance

You can now access your website using your domain

Now Lets talk about Vite
LiKe I mentioned before, vite is a js build tool that simplifies the way we build front-end web applications. Other tools to do this include webpack that we mentioned above when using create react app. Using webpacks can be slow as it adds more code dependencies. Vite is lightweight development server that is built on top of the native ES modules feature of modern browsers.
It's designed to be fast, simple and easy to use.

Creating and Running Vite Project
To create a vite project, you simply need to create a folder eg .viteproject
cd into viteproject then:

npm create vite@latest
npm install
npm run dev

follow the prompts and the project will be created with the default files and folders

The main key features of vite include :

1. Vite does not require many configuration or setup and can be used with any framework as seen when creating a vite project, you have the option to choose which framework to use.
2. Vite is faster than create react app as it uses the Native ES modules feature of modern browsers eliminating the need for webpack and Babel.
3. Has HMR(Hot module Replacement) feature which enables you to make code changes instanly without losing the state of the application.

Deployment on cloud
Deploying Vite on cloud is straightforward. Initially I struggled with this because I assumed I'd just use pm2 and everything will just be fine. It did not work 😂. Word of advice, read code documentation. It's not like user manual which we all avoid reading, and assume we'll figure it out along the way.
Anyway, the process is quite simple.
Inside the project folder run:
npm run build
This should create a dist folder with all the necessary files and folders bundled into a lightweight folder which you can point at in the sites-available configuration file

The dist folder is what will be rendered.
Access your domain https://dutdavid.com and you should see your site.

In conclusion, both build tools provide a development environment with unique features for development. There are key differences and it's all based on your preferences. Inshort Whatever floats your boat.