Deploy Your ZEIT Now App With GitHub Actions

A new simple way to handle your CI/CD within GitHub

Bruno Sabot
Sep 2, 2019 · 5 min read

I recently got access to GitHub Actions and I decided to test it with a simple deployment in ZEIT Now. My first steps were to look at this wonderful article from Leonhard Melzer.

It contains a lot of useful information but, unfortunately, it uses the old workflow syntax, which is now deprecated in favor of YAML. I spent a lot of time making the conversion, so here is an article on how I achieved it with a yml file.

Requirements


Get Started

As I mainly work with React, I will give you an example with a create-react-app application but feel free to use any other library you like.


ZEIT Now Configuration

Now requires a configuration file at the root of the repository, named now.json, which contain the app configuration on the hosted environment.

Sample now configuration file

Let’s consider the important parts of this file:

There is more! As the @now/static-build I use has some constraints, I need to respect them:

Putting everything together, our package.json file will look like this:

To have a lighter gist, I only kept the name, version, and scripts keys

Okay, everything is now set for deployment. Our next step is to implement the appropriate GitHub Actions.


GitHub Actions Configuration

To create a new deployment workflow, we need to create a .github folder at the root of our repository. You might already be using it if you use the issue templates.

Then, add a workflows subfolder that will contain as many workflows as you want.

Next, we will create a YAML file that corresponds to the deploy workflow we want. You can create many files to create multiple workflows, one for the tests and one to deploy, as an example.

Now, let’s analyze what we wrote in the file:

The jobs list in the GitHub interface

The jobs look almost the same. I will only present the publish one that contains more information than the others.

Once again, let’s dive in to see how steps are configured:

With the jobs on the left and the steps on the right

Storing secrets

In the YAML file, we use a ZEIT_TOKEN secret. You can set it in the Settings menu, where we can find a Secrets menu. Once you add a secret, you will not be able to get the value again.


Conclusion

Setting up GitHub Actions was a bit complicated at first, especially because the stories you can find on the internet use the old syntax. But, in the end, everything is pretty simple and functional for a beta feature.

There is, of course, more to say on the usage, considering the build performance, for example. But that will be the content of another story. Stay tuned!

I enjoyed exploring the API and I hope you will be as excited as I am to start digging into the Actions!

Better Programming

Advice for programmers.

Bruno Sabot

Written by

🚀Front Developer, React, VueJs, HTML, CSS, Performance, UX. 🏡 @ZenikaIT & @bdxio & @GDGBordeaux & brunosabot.com

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Why Do Incompetent Managers Get Promoted?

1.1K

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade