As easy as it could be...

This page started as an experiment to see how easy it is to deploy a website from 0 to production, keeping things as simple as possible

Lets start defining the rules:

• HTML with or without CSS.
• Should support hot reloading for development purposes.
• Should be integrated with Github.
• Should be deployed using NGINX.
• The server is a DigitalOcean droplet.

HTML and CSS

The most straight forward thing to do, just throw the content (this) and some CSS to style the content

<meta name="viewport" content="width=device-width, initial-scale=1" />

Stack Overflow

MDN reference

Super important property, listen understand and memorize this

Remember to check you have the latest stable Node and NPM versions

This step is not required but recommended, so I'll link the steps to do it:

1. First, clear the npm cache

   npm cache clean -f

2. Install n, Node's version manager

   npm install -g n

3. Install the latest stable version

   sudo n stable

Knowing your Node version is up to date is going to save you some time because certain node modules have some version requirements. For example vite.

HOT reloading

In order to be able to hot reload a site, you need a development server in the computer, listen to the port where the tool gives the content

As far as I've read, vite is a pretty good option for this.

In order to use vite, you need node(-v 14.18+ or 16+).

After you've meet the requirements, you have to run in the terminal

or

cd my-vanilla-app

npm install

npm run dev

If you want to run locally(in your computer) and also in your network: CAREFUL EVERYONE IN THE NETWORK COULD SEE THE WEBSITE

npm run dev -- --host

After you have developed the code, then you have to build the files for production, so if you're using npm, you could simply type the next command in the terminal, inside the project folder.

Build the app

npm run build

Preview the app LOCALLY

npm run preview

Version control

For version control, we're going to use git to sync the project with Github.

Since the project already exist locally in the machine, lets push the repository from the command line:

1. git remote add origin [email protected]:{username}/{projectname}.git
2. git branch -M main
3. git push -u origin main

When trying to do this I got the problem git@github permision denied(publickey).

Note: If you messed up and instead of adding the SSH add the HTTPS repository, you won't be able to push because https uses user and password(deprecated since 2021), so you'll have to re-add the the origin using the SSH url.

git remote set-url origin git://new.url.here

You can see more detail here:

I have to generate a key pair for github

ssh-keygen

After generating the pair of keys add the public key to your github acc.

Settings -> SSH and GPG keys -> Add new SSH Key(add the public one)

Web server, NGINX running on a DO Droplet

In order to do this step, you need a Digital Ocean droplet ready to connect with SSH. Then you connect to the droplet via the command ssh <username>@<serverIP>

Lets do a couple things before installing NGINX considered good practices and that can save us a lot of headaches.

First, lets add a new user to the server, and connect without being root

Follow this tutorial(First answer to the question)

Create home directory + .ssh Directory

mkdir -p /home/mynewuser/.ssh

Create Authorized keys file

touch /home/mynewuser/.ssh/authorized_keys

Create User + Set Home Directory

useradd -d /home/mynewuser mynewuser

Add User to sudo Group

usermod -aG sudo mynewuser

Set Permissions

chown -R mynewuser:mynewuser /home/mynewuser/

chown root:root /home/mynewuser

chmod 700 /home/mynewuser/.ssh

chmod 644 /home/mynewuser/.ssh/authorized_keys

Set password on user

passwd mynewuser

NOTE: Remember that you're only allowed to add an ssh key through the web interface in DigitalOcean when you're creating the droplet<VPS>, after that, you have to do the process through the Project -> Resources -> Droplet -> Access console

NGINX

Now we have to install nginx, but first, remember you first need to update and upgrade packages

sudo apt-get update

sudo apt-get upgrade

After that, you can install nginx

sudo apt install nginx

Check if nginx is running using

sudo systemctl status nginx

Simple Deploy

Right now the deploy is really easy to breake and clumsy, this is a really good area for improvement

Lets review the current method of deployment

After I make the changes to the project and commit the changes the deployment process start

1. npm run build This prepare the files for deployment.
2. scp -r ./dist/* {username}@{domain|ip}:{destinationFolder} Use secure copy to move the folder dist to the remote location in the VPS.