Ryan Fischer

Webpack and Rails: Part 1 - Why We Replaced Asset Pipeline

Oct 18 2016

Several months ago, we decided to replace Ruby on Rails’ Asset Pipeline with Webpack. In this series of blog posts, we’ll be looking into why we did it then going over examples of how we did it.

To get started, some of the reasons why we made the decision include:

  • Using Webpack allows easier maintenance for third party libraries such as versioning and installing. No more vendor folder!
  • Moved to using ES6 instead of coffeescript - this is more of a preference but there is more general acceptance and knowledge of ES6 in the javascript community.
  • Hot reloading of the application with Webpack Dev Server
  • Our page loads using Asset Pipeline were taking several seconds longer when JSX was introduced for React since it compiled files by default during each refresh.

There were difficulties involved when we first started that we have been resolving over time. The biggest time investment was learning how to configure Webpack and also working with ES6. We took a simple approach at the start with a webpack dev server for local use and a custom script to upload production builds.

Since then we have streamlined our process for development and production. For development, we have everything integrated and a Foreman process to run all the servers in one terminal with one command. On production, we have a combination of Heroku, AWS, Cloudfront and npm to automatically build a our production file on deployment. No more manual production builds!

We’ll be following up with more examples of setting Webpack with Rails locally and on a Heroku production environment. Our next post will be about integrating Weback and Rails for your local environment. Stay tuned!