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 devfirebase login:citravis encrypt "1/xxx"

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

deploy:

• 
  

  
  

  
  

  
  

  
  

  
  

  provider: firebaseproject: devtoken:secure: "encrypted stuff"skip_cleanup: trueon:branch: "master"

• 
  

  
  

  
  

  
  

  
  

  
  

  provider: firebaseproject: prodtoken:secure: "encrypted stuff"skip_cleanup: trueon: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 patchgit 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.