Front-End Options

JavaScript and Webpacker

We are living in a JavaScript renaissance—no longer is it the whipping boy of language purists. Rails has embraced modern JavaScript technologies like React through its inclusion of Webpacker, a gem that brings webpack support.

As Rails developers, it is important to be able to incorporate these technologies into our apps as needed, so our Docker environment needs to support us in that endeavor.

We will explore the options for working with JavaScript as part of our Rails development. We will also see how to include a React front-end in our Rails app by installing and configuring Webpacker. By the end of this chapter, our Docker-based development environment will play nice with all this modern JavaScript goodness.

The JavaScript front-end options

There are a number of different options when it comes to combining JavaScript into the front-end for your Rails apps. Perhaps the biggest choice is whether your Rails app will serve up the front-end or not. Both are equally valid options, and each way has some advantages and disadvantages and will lead to different setups. If your Rails app is not serving up your front-end, that means you are using your Rails app as an API layer. In this case, you would have a separate front-end, typically written purely in JavaScript, whether that is React, Ember, Vue.js, or something else. However, in general terms, it is quite straightforward, and you will largely be applying the skills you have already learned.

Outline

Here is a basic outline:

• Rename your web service. Naming is important. In this scenario, your Rails app is really the API or back end, so you should name it as such.

• Create a custom image for running your JavaScript front-end app. In the same way, we have created a custom image to run our Rails app, you would do the same but for your JS front end. Its Dockerfile could build on top of a standard Node.js image, adding the app-specific setup required.

• Create a separate, front-end service in your docker-compose.yml. This would be your standalone JavaScript application. You would configure, via environment variables, the API endpoint it should use (the domain name and port of the Rails API).

If, on the other hand, you are using Rails to serve up your front end, that means using the facilities that Rails provides. Rails offers two mechanisms for serving up JavaScript front ends: the (Sprockets-based) asset pipeline and the new Webpacker approach added in Rails 5.1. The traditional Sprockets-based asset pipeline works out of the box without any special setup. As part of running the Rails server, your assets will automatically be compiled and served up in your views in the standard Rails way.

Getting your Rails app working with Webpacker takes a little bit more setup with Docker. Since this is such a popular approach, we are going to guide you through its setup.

Rails JavaScript front end with Webpacker

Rails has included a way to build rich JavaScript front ends into your apps since version 5.1 using a gem called webpacker. Webpacker has a modular architecture, allowing you to integrate different front-end technologies, be it React, Ember, Vue.js, or even Elm. Using React as an example, let’s see how we will configure Webpacker in our Dockerized app. First things first. Webpacker requires Yarn and a current version of Node. This requires an update to our Docker image.

Modification of Dockerfile

Let’s update our Dockerfile according to the changes we need: