Gatsby Deployment With Enviroment Variables

Hi everyone,

so I’ve finally finished my new portfolio, however, I’ve now come to deployment and I’m confused how I can deploy with enviroment.

Deploying a netlify is relatively straight forward to do, but with Gatsby and enviroment varialbes I can’t see an easy solution.

How can I deploy my Gatsby site with enviroment variables at build time ? I’ve done some research but couldn’t find much.

I ideally want to automate deployment via a workflow action like the examples below, but I’m not sure how I can attach netlify specific enviroment variables:

name: Netlify Builds

# Controls when the action will run. Triggers the workflow on push or pull request

# events but only for the master branch

on:

  push:

    branches: [master]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel

jobs:

  # This workflow contains a single job called "build"

  build:

    # The type of runner that the job will run on

    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job

    steps:

      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it

      - uses: actions/checkout@v2

        name: 'Checkout Source Code'

      - name: Setup Node.js environment

        uses: actions/setup-node@v1.4.2

        with:

          version: 12.x

      # Runs a set of commands using the runners shell

      - name: Build the site

        run: |

          yarn install --production

          yarn build

      - name: Deploy to Netlify

        uses: nwtgck/actions-netlify@v1.1.3

        with:

          publish-dir: './public'

          production-branch: master

          deploy-message: '${{ github.event.head_commit.message }}'

        env:

          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

UPDATE 27/08/2020:

My site has deployed but I don’t think the enviroment variable was inejcted correctly as Google Analaytics isn’t showing I’m active. This did work in my local production build so it’s not Google Analytics, so something is going wrong somewhere.

On netlify:

image

On my local production server:

how are you naming your environment variables?

You might for these articles helpful:

Hi Perry,

It was the analytics plugin causing the issue.

However, now I’ve deployed my site to my actual live enviroment the build isn’t updating. My Github Action runs, yet Netlify doesn’t update which is annoying.

is your build completing successfully?

Yeah it is according to the action.

It’s currently showing the outdated copy though.

The app was originally stored in a seperate folder, though I’ve updated those settings and nothing.

It’s updated the netlify preview image, but when I visit the site it’s the old version.

I checked the Netlify preview url and it work’s fine. Not sure why I can’t see it on the none preview link.

Hi Perry,

Do you need to have activate builds even if your going through own CI action ?

Thanks,

Alex

Hi @AlexMachin1997 :wave:t2:
Welcome to The Community :slight_smile:

I’m not exactly sure how to say this, but I think you may be causing yourself a great deal of pain by misunderstanding the fundamental premise of how Netlify works… and I don’t say that to be unkind I just want you to experience the wonderful nature of Netlify in full!

I’m not sure what your current mental model is, but it feels a bit like you’re thinking of Netlify as a pure CDN - somewhere you upload files to once you build them on a CI tool or other mid-tier build location. E.g. Netlify is just for a deployment. Your GitHub Action script indeed builds the site, then uses (under the hood) Netlify CLI to push the public files up to Netlify’s servers… very CDN-like.

Netlify is built to do all of that for you. Netlify works best (and honestly provides the smoothest Developer Experience) when you connect it directly to your Github Repository, where it then watches for new commits on your master/main branch, it builds your site a la CI tool, then it automatically publishes all of your files and deploys them to the Netlify Edge (CDN). Netlify was designed and built to be an all-in-one solution for static sites and static-site-generators where you don’t have to do much beyond just pushing to master/main. Does that make sense? I don’t think you need Github Actions at all, especially for an SSG like Gatsby, which Netlify supports very very well.

I hope that helps!


Jon

Hi Jonsully,

Thanks for the welcome.

Yeah I was probably making it more complicated than it needed to be, me being I wanted to have complete control over my project.

Thanks for the explanation, yeah it does make sense. Honestly I thought it would be easy to get working with a Github action script. However, it was not it’s caused hours of pain trying to get it to deploy when I could have kept how it worked before ie using Netlifys built in functionality.

Your answered defiantely helped. As long as I use Netlify I’ll probably stick to the built in tools as they are clearly the better choice for website deployment.

I’ll close this issue as it seem’s I’m just going to keep using Netlifys built in functionality :slight_smile:

Thanks,

Alex

No problem and glad I could help!

I want to emphasize too that you do have complete control over your build… or at least 99% control :stuck_out_tongue: There are certain components of the build image you can’t change but you can definitely setup your build script(s) as you’d like and run whatever arbitrary code you’d like during your build. It’s pretty much free reign :sweat_smile: it just works a heck of a lot better when you do that inside Netlify Build. Doing it outside of Netlify Build can work it’s just more complicated :slight_smile:


Jon

1 Like