DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Bart Wijnants
Bart Wijnants

Posted on • Originally published at hackernoon.com on

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

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.


Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post