How to auto-deploy frontend applications to Surge using continuous deployment

Previously, when software developers developed new products, they had to wait for weeks and in some cases months to deploy new versions of their applications to production environments. These days, software developers have found new and more convenient ways to release the products they have developed automatically while ensuring zero downtime.

In this post, we will discuss how to auto-deploy frontend applications to Surge using Git hooks and continuous deployment while ensuring zero downtime.

What is Surge?

Surge is an open-source static site hosting solution. Surge is free to use and provides features such as basic SSL and the option to customize domain names for free. Surge has a command line interface that allows developers to publish native web applications in just a few clicks:

npm install --global surge

The above command will install Surge globally on your machine. You can test out the installation by running surge in your terminal. This will prompt you to log in to your surge account or create a free account if you do not already have one.

Auto-deploying to Surge using Git hooks

Although it is possible to publish web pages to Surge using the command line, it is not the best approach. Using the command line would require the developer to manually republish the webpage whenever a change has been made to the project. With Git hooks, we can automatically deploy our application once a specified Git event has been triggered. To see Git hooks in action, we have to create a sample React project. Run the following command:

create-react-app githook-demo

The above command will create a simple React project in the folder githook-demo. By default, create-react-app (CRA) will initialize a Git repository. Git hooks are stored in the Hooks directory of the Git folder.

A good point to deploy our application to Surge will be right after a commit and before pushing the commit. To do this, we will need to make the pre-push hook executable. We can set this up using a third-party package called Husky:

npm install husky --save-dev

With Husky installed, open the package.json file and add the following JSON data:

"husky": {
  "hooks": {
    "pre-push": "npm run build && surge --project ./build --domain your-domain.surge.sh"
  }
}

The above JSON data contains a pre-push script. This script will build the React project and deploy the bundled application in the build folder to the domain specified. By default, CRA adds the build folder to the .gitgnore file. It is important to remove the build folder from the .gitignore file before committing the project to Git.

Once git push origin main is executed, Husky will execute the pre-push hook after the remote refs have been updated but before any objects are transferred to it. Visiting the specified domain, you should see the githook-demo application deployed live on Surge.

Auto-deploying to Surge using Travis CI

In the above section, we explored how to deploy our React application to Surge using Git hooks, in this section, we will learn how to deploy a sample Vue application using Travis CI.

Travis CI is a popular continuous integration tool that can be used to build, test, and deploy an application’s codebase automatically. To see this in action, we need to create a sample Vue application by running Vue Create Travis-demo.

Once this sample project has been generated, create a remote GitHub repository and push all the content there. This is important because Travis CI acts only on code that has been pushed to a Github repository.

The next step in wiring up continuous deployment for our application is to connect the GitHub repository with Travis CI. To do this, head over to travisci.org and add the GitHub repository to Travis. This article explains how to add GitHub repositories to Travis.

Our setup is coming together nicely, the next step is to add a Travis manifest file, in this file we will include all the information Travis will need to deploy our Vue application to Surge. Create a file called .travis.yml in the root of the project directory and add the following lines of code to it:

language:node_js
node_js:
   - "node"
cache:
  directories:
    -node_modules
script: 
  - npm run build
deploy:
  provider:surge
  project:./dist/
  domain:example-domain.surge.sh
  skip_cleanup: true
  on:
    branch: main

The above lines of code contain the necessary configurations Travis will need to deploy our Vue application:

• The language field specifies the language our code is written in
• The cache.directories field is used to set directories that should be cached by Travis for previous builds. The Node module directory will be cached
• The script field contains scripts that Travis will execute during the build. In our case, we want to execute the script npm run build. This script will create a dist folder that will contain a minified and production-ready version of the sample Vue application
• The deploy.provider field contains the value of the platform our application will be deployed on. Various hosting platforms can be specified, in our case, the value will be Surge since we intend to deploy our Vue application to Surge
• deploy.project is the directory our project is located. If unspecified, Travis sets the value of the project field to the root directory. In our case, npm stores the production optimized version of our application in a dist folder
• The deploy.domain field as the name implies contains the domain on which you would like your application to be hosted on
• Whenever a build is finished, Travis cleans up unused files some of which might be necessary for the application to function properly. The skip_cleanup field tells Travis to skip the cleanup process
• The on.branch field specifies which branch of the repository should be deployed. In our case, we set it to main. This means only changes pushed to the main branch will be auto deployed. This allows developers to have a test branch for changes that should not be in the production version of the application

With the .travis.yml file setup, we are one step away from deploying our application. Travis CI needs to authenticate the surge account while deploying. We are required to add our surge authentication details as secret environment variables to Travis CI. To set this up, head over to the terminal and run the following command to retrieve your Surge authentication token:

  Surge Token

Copy the code surged returned and head over to the project imported to Travis CI dashboard and add the token.

The SURGE_LOGIN environment variable will be the email address associated with your Surge account.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

At this point, everything is set up! You can go ahead and push local changes to the main branch of the remote repository. This will trigger the Travis CI build which in turn will auto-deploy the sample Vue application to the domain you specified in the travis.yml file up above.

Conclusion

In this post, we discussed how to deploy frontend applications to Surge using Git hooks and Travis CI a tool for continuous integration and deployment. Surge is free to use and ideal for simple static pages although it might not be the best option for more advanced applications. I encourage you to check out the official documentation to learn more about how to get more out of surge.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps — start monitoring for free.