loading...

Continuous deployment of a webpack app to multiple environments using Travic CI

bartw profile image Bart Wijnants Originally published at hackernoon.com on ・2 min read

TL;DR

I set up continuous deployment of a webpack app with tests in Jest hosted on Firebase using GitHub and Travis CI. Deploys to the DEV environment are done on every commit to master. Deploys to the PROD environment are done on every tag to master.

Check out the code here.

How to?

In code I use a default value:

var text = __CONFIG__ || default;

That value can be overridden in a webpack config file:

plugins: [
  new webpack.DefinePlugin({ 
    __CONFIG__ : JSON.stringify("override")
  })
]

In my .firebaserc file I defined multiple Firebase projects:

{
  "projects": {
    "prod": "prod-multi-webpack-travis",
    "dev": "dev-multi-webpack-travis"
  }
}

This allows me to setup ci for each project by executing the following commands:

firebase use dev
firebase login:ci
travis encrypt "1/xxx"

In the .travis.yml file I defined multiple deploys:

deploy:
  - provider: firebase
    project: dev
    token:
      secure: "encrypted stuff"
    skip_cleanup: true
    on:
      branch: "master"
  - provider: firebase
    project: prod
    token:
      secure: "encrypted stuff"
    skip_cleanup: true
    on:
      tags: true

Now I can also use the environment variables that Travis defines in my webpack config file:

plugins: [
  new webpack.DefinePlugin({ 
    __CONFIG__ : JSON.stringify(
      process.env.TRAVIS_TAG ? "override on tag" : "override"
    )
  })
]

If I do a push to GitHub the dev deploy is triggered and if I update the version then the dev and prod deploy are triggered:

npm version patch
git push --follow-tags

To get Jest tests working on files where the environment files are used I added some Jest configuration to my package.json file:

"jest": {
  "globals": {
    " __CONFIG__": null
  }
}

Conclusion

It took me way too long to get this working so I decided to write this blog post. This setup makes it very easy to have different configurations for each environment.

A downside is that the code needs to be bundled again every time you change environment.


Posted on by:

bartw profile

Bart Wijnants

@bartw

As Mick Jagger sang it in Sympathy For The Devil: Please allow me to introduce myself. I'm a man of wealth and taste. Well maybe just the first sentence. I'm not quite wealthy and a lot of people will strongly advice against my taste. I'm Bart, father of 2 boys, developer by trade, retired ice hockey player and knowledge sponge. I try to live by the KISS principle but sometimes I keep it more stupid than simple. Peace out.

Discussion

pic
Editor guide