Category: Github

Use Github Action to deploy React app to Surge

Reading Time: 2 minutes

 283 total views

  • Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it

npm script commands

  • Add script commands “build” and “clean” to build application and generate artifacts in dist/ directory
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html",
    "clean": "rm -rf ./dist/"
  }
  • Run “npm run build” to build static application before deployment to surge.sh

Surge setup

  • npm install surge globally
npm install -g surge
  • Login or create surge.sh account in command line
surge
email: <email address>
password: <password>

project:  <project directory>/dist
domain: <custom domain>.surge.sh
  • After the site is published, verify http://<custom domain>.surge.sh can be browsed

Surge Token

  • Generate surge token in command line
surge token
XXXXXXXXX        <-- a surge token is issued by Surge
  • In Github repo, create SURGE_TOKEN variable under Settings -> Secrets.
  • Keep surge token in safe location such that it can be reused to deploy other applications to Surge.

Create Github Action workflow file

  • Go to Actions tab of the github repo
  • Create surge.yml under .github/workflow

Paste the follow code in the yaml file

name: Deploy to surge.sh
on:
  push:
   branches:
    - master
jobs:
   build:
     name: Deploying to surge
     runs-on: ubuntu-latest
     steps:
       - name: Setup Node.js for use with actions
         uses: actions/setup-node@v1.1.0
         with:
           version:  12.x
      
       - name: Checkout branch
         uses: actions/checkout@v2
 
       - name: Clean install dependencies
         run: npm ci
 
       - name: Build app
         run: npm run build

       - name: Rename index.html to 200.html
         run: mv ./dist/index.html ./dist/200.html

       - name: Install Surge
         run: npm install -g surge
        
       - name: Deploy to Surge
         run:  surge ./dist https://<custom domain>.surge.sh --token ${{secrets.SURGE_TOKEN}}
  • Replace <custom domain> with actual surge domain name

Add 200.html page for Client-side routing

  • When page is refreshed in Surge, the url does not reach our Reach Router and default Surge 404 page is returned.
  • The solution is to rename dist/index.html to dist/200.html before deployment to Surge is carried out.
  • This is done by mv ./dist/index.html ./dist/200.html in surge.yaml
  • The reason is to load the app when 200 response is resulted. Then the app loads the appropriate component by matching the path of reach router to the url

References:

Use Github Action to deploy React app to Netlify

Reading Time: 2 minutes

 109 total views

  • Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it

Fix 404 not found when page is refreshed

My React app uses Reach Router library to route user from root / to /countries/:language. When I refreshes page with F5, reach router does not handle redirection and 404 page is returned.

In order to solve the problem in Netlify, I define a redirect rule in netlify.toml to redirect all routes to /index.html with HTTP status code 200.

  • Create netlify.toml in project directory
# Redirects and headers are GLOBAL for all builds – they do not get scoped to
# contexts no matter where you define them in the file.
# For context-specific rules, use _headers or _redirects files, which are
# PER-DEPLOY.

# A basic redirect rule
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Update package.json to create npm script commands that Github Action workflow file depends

  • “npm run clean” deletes all files in dist/ directory
  • “npm run build” builds project and generates artifacts in dist/ directory
  "scripts": {
    "build": "parcel build src/index.html",
    "clean": "rm -rf ./dist/"
  }
  • Go to Actions tab of the github repo
  • Create netlify.yml under .github/workflow

Paste the follow code in the yaml file

# .github/workflows/netlify.yml
name: Build and Deploy to Netlify
on:
  push:
  pull_request:
    types: [opened, synchronize]
jobs:
  build:
    name: Deploying to netlify
    runs-on: ubuntu-latest
    steps:
      - name: Setup Node.js for use with actions
        uses: actions/setup-node@v1.1.0
        with:
          version:  12.x
      
      - name: Checkout branch
        uses: actions/checkout@v2
 
      # ( Build to ./dist or other directory... )
      - name: Clean install dependencies
        run: npm ci

      - name: Remove dist
        run: npm run clean

      - name: Build app
        run: npm run build
 
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.1.10
        with:
          publish-dir: './dist'
          netlify-config-path: './netlify.toml'
          production-branch: master
          github-token: ${{ secrets.ACCESS_SECRET }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        timeout-minutes: 1

netlify-config-path indicates the configuration path to Netlify platform.

Netlify environment variables

Login to Netlify to look up NETIFY_SITE_ID and NETIFY_AUTH_TOKEN.

Go to Team > Site > Settings > Site Information > API ID to copy down the NETLIFY_SITE_ID

Go to User Settings > Applications > Personal access token and clicks New Access Token button to generate a token. The token is your NETLIFY_AUTH_TOKEN and it should be kept in a safe location.

Now, you are ready to create NETLIFY_SITE_ID and NETLIFY_AUTH_TOKEN variables under Settings -> Secrets in Github.

We are done! There is no need to write custom deployment script and travis configuration file to automate the CI/CD process. Github notifies Netlify to automate the build process and publish the site when latest changes are committed.

References:

Use Github Action to deploy Vue app to Netlify

Reading Time: 2 minutes

 126 total views

  • Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it
  • Go to Actions tab of the github repo
  • Create netlify.yml under .github/workflow
  • Paste the follow code in the yaml file
# .github/workflows/netlify.yml
name: Build and Deploy to Netlify
on:
  push:
  pull_request:
    types: [opened, synchronize]
jobs:
  build:
    name: Deploying to Netlify
    runs-on: ubuntu-latest
    steps:
      - name: Setup Node.js for use with actions
        uses: actions/setup-node@v1.1.0
        with:
           version:  12.x

      - name: Check out branch
        uses: actions/checkout@v2

      # ( Build to ./dist or other directory... )
      - name: Clean install dependencies
        run: npm ci

      - name: Build app
        run: npm run build-netlify

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.1
        with:
          publish-dir: './dist'
          production-branch: master
          github-token: ${{ secrets.ACCESS_SECRET }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        timeout-minutes: 1

I deploy the Tic Tac Toe game to both github page and Netlify; therefore, I use NODE_ENV variable to configure the public path in vue.config.js.

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/vue-tic-tac-toe/" : "/",
  outputDir: "dist",
  lintOnSave: process.env.NODE_ENV !== "production",
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
};

The NODE_ENV variable of github page is “production” by default and the full URL becomes https://<username>.github.io/vue-tic-tac-toe/. For Netlify deployment, I set the NODE_ENV variable to “netlify” and the game is hosted on https://<netlify app>/ .

Open package.json and add a task that builds the project to dist directory and publishes it to Netlify. 

{
  ...
  "scripts": {
    ...
    "build-netlify": "NODE_ENV=netlify vue-cli-service build"
  },
  ...
}

Login to Netlify to look up NETIFY_SITE_ID and NETIFY_AUTH_TOKEN.

Go to Team > Site > Settings > Site Information > API ID to copy down the NETLIFY_SITE_ID

Go to User Settings > Applications > Personal access token and clicks New Access Token button to generate a token. The token is your NETLIFY_AUTH_TOKEN and it should be kept in a safe location.

Now, you are ready to create NETLIFY_SITE_ID and NETLIFY_AUTH_TOKEN variables under Settings -> Secrets in Github.

We are done! There is no need to write custom deployment script and travis configuration file to automate the CI/CD process. Github notifies Netlify to automate the build process and publish the site when latest changes are committed.

References:

Use github action to deploy vue app to github page

Reading Time: < 1 minutes

 152 total views

  • Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it
  • Go to Actions tab of the github repo
  • Create main.yml under .github/workflow
 name: Deploy to github pages
 on:
   push:
    branches:
     - master
 jobs:
    build:
      name: Deploying to gh-pages
      runs-on: ubuntu-latest
      steps:
        - name: Setup Node.js for use with actions
          uses: actions/setup-node@v1.1.0
          with:
            version:  12.x
        - name: Checkout branch
          uses: actions/checkout@v2

        - name: Clean install dependencies
          run: npm ci

        - name: Build app
          run: npm run build
        
        - name: deploy
          uses: peaceiris/actions-gh-pages@v3
          with:
           github_token: ${{ secrets.ACCESS_TOKEN }}
           publish_dir: ./dist

There is no need to write custom deployment script and travis configuration file to automate the CI/CD process. Github does it for you when latest changes are pushed to master to start the build process and copy the contents of output folder to gh-pages branch.

References: