Posts in Series
- Rails 6 Series - Starting Rails 6 with Vue on AWS
- Rails 6 Series - Setting up AWS resources
- Rails 6 Series - Deploying to AWS
- Rails 6 Series - Configuring Vue and Webpack
We have successfully deployed the basic Rails 6 sample application to AWS. All that remains now is to configure both Vue and Webpack for production use. In local development we can serve our packs through
bin/webpack-dev-server but in production we need everything pre-compiled so that Nginx can serve the content in the packs directory.
In this post we will go over configuring webpack so that we can import Vue globally in each pack as required. We will configure Vue and some basic Vue plugins and also make it available in all packs as needed. Lastly we will go over how webpack differs from the traditional Rails Asset Pipeline.
In the root directory of our application we have the webpack configuration files by stage. You can find these under
config/webpack/*.js. The main file we need to update is
environment.js. This file imports webpack, vue, and any other top level library we need.
When we created our initial Rails structure, we told rails that we will be using webpack and vue via the
--webpack=vue flag in the cli. By default this will create the following content in
To properly configure Vue for production, lets make sure that Webpack is configured to load the right payload for it. Create a new file named
vue_config.js within the
config/webpack directory and copy the contents below into it.
After that, update the
environment.js file from earlier to load our custom vue config and override the default development payload for vue. This will configure it to load correctly in production.
With webpack configured, we can sanity check that our packages are up to date and included. If any are missing or if you need additional packages, add them to your
package.json file in the root directory of our application.
The final bit is to load in Vue into our application pack found in
Migrating away from Asset Pipeline
app/assets. The way to model this approach is that you build your directory structure within
webpack during application build.
Intead of using
At this point everything has been setup for both local development and pushing to production. Webpack will load the correct version of Vue and Vue has been configured to pull in both Turbolinks and BootstrapVue. With this, we can start building out our application and creating as many packs as we need. Webpack will handle the compilation, minification, and tree-shaking for us!
To learn more about Webpack take a look at the concepts page at the official docs. This was sorely missing in the Rails Guides and helped me understand how webpack works when learning how to use webpack with rails.