Deploy Static Page using Surge Tool

Explains how to set deploy static web pages using surge tool.

This blog was originally posted on FOSSASIA Blog.

Susper is being improved every day. Following every best practice in the organization, each pull request includes a working demo link of the fix. Currently, the demo link for Susper can be generated by using GitHub pages by running these simple commands – ng build and npm run deploy. Sometimes this process on slow-internet connectivity takes up to 30 mins to generate a working demo link of the fix.

Surge is the technology which publishes or generates the static web-page demo link, which makes it easier for the developer to deploy their web-app. There are a lot of benefits of using surge over generating demo link using GitHub pages:

As soon as the pull request passes Travis CI, the deployment link is generated. It has been set up as such, no extra terminal commands will be required. Faster loading compared to deployment link is generated using GitHub pages. Surge can be used to deploy only static web pages. Static web pages mean websites that contain fixed contents.

To implement the feature of auto-deployment of pull request using surge, one can follow up these steps:

1. Create a pr_deploy.sh file which will be executed during Travis CI testing.

2. The pr_deploy.sh file can be executed after success i.e. when Travis CI passes by using command bash pr_deploy.sh

The pr_deploy.sh file for Susper looks like this:

#!/usr/bin/env bash
if [ “$TRAVIS_PULL_REQUEST” == false ]; then
    echo “Not a Pull Request. Skipping surge deployment”
    exit 0
fi

angular build production
npm i -g surge

export SURGE_LOGIN="test@example.co.in"

# Token of a dummy account
export SURGE_TOKEN=<your-token-hash>

export DEPLOY_DOMAIN="https://pr-${TRAVIS_PULL_REQUEST}-fossasia-susper.surge.sh"
surge —project ./dist —domain $DEPLOY_DOMAIN;

In this way, we used Surge for auto-deployment of the pull requests in Susper.

References

• Static web publishing for the Front-End developers