Deploy a webpacker app on Engine Yard Cloud

The advent of Rails 5.1 brought along a set of new things.  One of those is the ability to use webpacker, which in turn helps having frontends built on top of frameworks like React.js.

The Engine Yard deployment process (dubbed serverside) is able to deploy and run webpacker apps, but not without a few tricks.  Below are the steps needed to get a webpacker app deployed and running on EY Cloud:

Enabling Yarn

By default, serverside uses npm to handle NodeJS modules.  Follow the instructions on this kb article to have it use yarn instead.

Afterwards, include the custom-packages recipe and have it install sys-apps/yarn version 0.27.5.  Details on how to work with custom Chef recipes can be found here.

More ey.yml settings

More config is needed for the deployment stages to compile the webpacker modules properly.  Add the following to your config/ey.yml file:

defaults:
  precompile_assets: true
  precompile_unchanged_assets: true
 

asset_dependencies:
- app/assets
- lib/assets
- vendor/assets
- Gemfile.lock
- config/routes.rb
- config/application.rb
- config/requirejs.yml
- app/javascript

Sharing webpacker assets between deployments

While the steps above ensure that webpacker assets are compiled, there is also a need for them to be available across deployments to further speed up the deployment process.  Add the code below to a deployment hook named deploy/before_bundle.rb:

# create the shared packs folder. Should be a one-time only task
run "mkdir -p #{config.shared_path}/packs"
# link the shared packs folder to the release being deployed
# so that packs are found even if assets haven't changed
run "ln -nfs #{config.shared_path}/packs #{config.release_path}/public/packs"

Final notes

The above steps should help you get the app deployed successfully.  From here on, your mileage may vary according to further customizations or needs your app may have.  Feel free to reach out to our Support Team by filing a ticket if further assistance is needed.

More Information

For more information about ... See ...
Webpacker on rails website https://github.com/rails/webpacker
Webpacker example app https://github.com/WoH/webpacker-example-app
Free tutorial on using React + Webpacker + Rails 5 https://medium.com/react-on-rails/free-tutorial-how-to-use-react-with-webpacker-and-rails-5-1