Deployment of a JavaScript project

1. Building the project

The first thing to do is to build the project. We use npm for during this, and we should have a script in the package.json file that will handle the actual build of the project.

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "Recipe application",
	"default": "index.html",
	"scripts": {
		"start": "parcel index.html",
		"build": "parcel build index.html --dist-dir ./dist"
	},
  "author": "Damian Demasi",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.0.0-beta.1",
    "sass": "^1.26.10"
  },
  "dependencies": {
    "core-js": "^3.15.2",
    "fractional": "^1.0.0",
    "regenerator-runtime": "^0.13.9"
  }
}

Before building the project, it's advisable to delete the .parcel-cahce and dist folders.

Now we can run the build:

npm run build

...

✨ Built in 17.25s

dist/index.html                  3.77 KB    878ms
dist/favicon.f1877f87.png        13.3 KB    555ms
dist/main.791002db.css           9.96 KB    5.13s
dist/controller.29741e2d.js    142.34 KB    8.10s
dist/icons.c781f215.svg         12.96 KB    553ms
dist/logo.09084f39.png          92.31 KB    553ms

2. Deploying the project manually

We can use any of these services to deploy our project (static projects with no databases):

• Surge (easy to use)
• Netlify (allows continuos integration using Git, offers free SSL certificate, CDN network spread all around the world for faster access, Collect form submissions, Split traffic to multiple branches) ⭐

We are going to use Netlify. We need to create an account, and simply drag and drop our project's dist folder to the Netlify page. Our project is now deployed.

3. Using a custom domain

When using Netlify, we can set up a custom domain. For example, for our recently deployed Forkify project, we can set up a forkify.damiandemasi.com domain. We should add a new CNAME entry in our DNS administration control panel (the place where we have our domain registered in). It should look something like:

By doing this we are creating an alias for the original URL (elastic-swanson-152625.netlify.app in this case), that will be accessible through the new URL (forkify.damiandemasi.com).

4. Continuous deployment

Continuos deployments means that whenever we commit a new change to our repository, a new deployment is automatically triggered as well.

On Netlify, in our site that we want to do the continuous integration, we have to go to Site settings -> Build & deploy.

In there, we need to click on Link site to Git. Then we need to link our project on Netlify to our repository (usually on GitHub). We need to select the repository and branch that is going to be linked.

We also need to specify the base directory, build command, and publish directory, just as it is specified in out package.json file.

Finally, we click on the Deploy site button.

From now on, each time we push our commits to GitHub, Netlify will automatically build a new version of our project and publish it once it's built.git