4. Automating your project's deployment procedure

If you're reading this, you've probably been following this series and are at the end or looking for steps to deploy your app/project to your custom domain. In either case, you've come to the right place. Continue reading this article to complete your deployment setup or begin by reading the series here.

First and foremost, I'd like to thank everyone for reading this article and following the series. I also admire your perseverance in reaching this point. I hope my series and articles have aided you in some way.

So, let us get started with the next steps to finish your final deployment configuration so that any changes you make to your app/project are automatically published to your custom domain.

In the DevOps context, you may have heard of the CI/CD (Continuous Integration/Continuous Delivery) process. While this article does not delve deeply into the concepts, here is a link to learn more about them and why automating deployments is important.

There are three steps in order to set up the deployment process for your project.

1. Designing a GitHub actions workflow to initiate deployment
2. Write a deployment script that will be used by GitHub actions to perform deployment.
3. In the package.json file, include a deploy npm script.

1. Designing a GitHub actions workflow to initiate deployment

Create a hidden directory .github in the root directory and then create another directory workflows inside it. Inside the workflows directory, create a file deployment.yaml.
Inside this deployment.yaml file, paste the following content. Please format the document to fix any indentation issues after pasting the below content.

name: Deployment using GitHub Pages
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  deployment:
    name: Deploying to <your-website-name>

    runs-on: ubuntu-latest

    strategy:
      fail-fast: true
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - name: Checkout branch
        uses: actions/checkout@v3

      - name: Use Node.js ${{matrix.node-version}}
        uses: actions/setup-node@v3
        with:
          node-version: ${{matrix.node-version}}
          cache: "npm"

      - name: Clean install dependencies
        run: npm ci

      - name: Deploy <your-website-name>
        run: |
          git config user.name "<your-name>" && git config user.email "<your-email>"
          npm run deploy

When any commits are pushed to the main branch or a pull request is merged into the main branch, the above script basically starts the deployment process.

The deployment script also includes the tasks that must be completed when this process is triggered.

Each job has a name, the underlying OS platform it runs on, a strategy it must use, and the steps it must take to complete the job.

Thus, when the deployment workflow/pipeline is triggered, you see the logs as follows:

2. Write a deployment script that will be used by GitHub actions to perform deployment.

To successfully complete the above workflow, you must gather all of the resources required to publish the website to your custom domain.

This entails creating the project and publishing it to your own domain. Manually performing all of the steps involved in this is a time-consuming process. As a result, we create a deployment script and have our workflow defined in Step 1 run it so that the deployment is done for us automatically.

In the project's root directory, create a shell script called deploy.sh and add the following contents to it.

#!/usr/bin/env sh

# abort on errors
set -e

# Checkout an orphan branch
# Docs: https://git-scm.com/docs/git-checkout/1.7.3.1#git-checkout---orphan
git checkout --orphan deployment

# build
npm run build

# add cname record in dist folder
cd dist
echo "www.<your-domain-name>.com" > CNAME

# exit dist
cd -

# set worktree path to dist and stage all changes
# Docs: https://git-scm.com/docs/git#Documentation/git.txt---work-treeltpathgt
git --work-tree dist add --all

# set worktree path to dist and commit staged changes with a message
git --work-tree dist commit -m "Deploy"

# push committed changes to deployment origin branch
# make sure to change your branch here if your source branch is 
# different in your GitHub pages configuration settings
git push origin HEAD:deployment --force

# remove the dist folder
rm -rf dist

# checkout main
git checkout -f main

# delete deployment
git branch -D deployment

3. In the package.json file, include an npm script deploy.

Finally, a script must be included in the package.json file. When our GitHub process defined in Step 1 starts, we'll use the package.json file to run the script. Add the script as shown in the screenshot below.

That's it! You're finished. After you've done the modifications listed above, commit and push your changes to your main branch.

This should activate the previously configured GitHub workflow and publish the changes to your custom domain.

If you followed the steps carefully, you should be able to use the GitHub Pages workflow to automatically publish your website to your custom domain.

Congratulations! Please use the comments area to share your unique experience with this series, as well as any thoughts or recommendations.

Thank you all for your support, and stay tuned for future stuff!
😀