Rails, Webpacker, Postgresql on Docker (DEV setup)

rails_docker_dev.md

Rails, Webpacker, Postgresql on Docker (DEV setup)

Create Rails app with docker

$ docker run --rm -it -v ${PWD}:/usr/src -w /usr/src ruby:2.7 sh -c 'gem install rails:"~> 6.0.3" && rails new --database=postgresql <app_name>'

Create Docker files

1. cd into project directory

   $ cd <app_name>
   

2. Add docker-entrypoint.sh:

   #!/bin/sh
   
   rm -f tmp/pids/server.pid
   bin/rails server -b 0.0.0.0

3. Make docker-entrypoint.sh executable:

   $ chmod +x docker-entrypoint.sh
   

4. Add Dockerfile:

   FROM ruby:2.7-alpine
   
   # Install dependencies
   RUN apk update \
     && apk upgrade \
     && apk add --update --no-cache \
     build-base curl-dev git postgresql-dev yaml-dev zlib-dev nodejs yarn tzdata
   
   # Set app directory
   WORKDIR /usr/src/app
   
   # Install & run bundler
   RUN gem install bundler:'~> 2.2.2' \
     && bundle install
   
   # Copy project files
   COPY . ./
   
   CMD ./docker-entrypoint.sh
   

5. Add docker-compose.yml:

   version: '3.2'
   
   volumes:
     dbdata:
       driver: local
   
   services:
     db:
       container_name: <app_name>_db
       image: postgres:12-alpine
       environment:
         - PGDATA=/var/lib/postgresql/data/pgdata
         - POSTGRES_USER=<db_user>
         - POSTGRES_PASSWORD=<db_password>
       ports:
         - 5432:5432
       volumes:
         - dbdata:/var/lib/postgresql/data/pgdata
   
     app:
       container_name: <app_name>
       build: .
       ports:
         - 3000:3000
       environment:
         - RAILS_ENV=development
         - RACK_ENV=development
         - POSTGRES_USER=<db_user>
         - POSTGRES_PASSWORD=<db_password>
       volumes:
         - .:/usr/src/app
       depends_on:
         - db

Build app

$ docker-compose build

Install Webpacker

$ docker-compose run --rm app bundle exec rake webpacker:install

Configure database

1. Update config/database.yml:

   default: &default
     adapter: postgresql
     encoding: unicode
     pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
     username: <%= ENV["POSTGRES_USER"] %>
     password: <%= ENV["POSTGRES_PASSWORD"] %>
     host: <%= ENV["POSTGRES_HOST"] || "db" %>
   
   development:
     <<: *default
     database: <app_name>_development
   
   test:
     <<: *default
     database: <app_name>_test
   
   production:
     <<: *default
     database: <app_name>_production

2. Create database:

   $ docker-compose up -d
   $ docker exec -ti <app_name> bundle exec rails db:create
   

Dockerize Webpacker

1. Add webpack service to docker-compose.yml:

   version: '3.2'
   
   volumes:
     dbdata:
       driver: local
   
   services:
     db:
       container_name: <app_name>_db
       image: postgres:11
       environment:
         - PGDATA=/var/lib/postgresql/data/pgdata
         - POSTGRES_USER=<db_user>
         - POSTGRES_PASSWORD=<db_password>
       ports:
         - 5432:5432
       volumes:
         - dbdata:/var/lib/postgresql/data/pgdata
   
     webpack:
       container_name: <app_name>_webpack
       build: .
       command: ./bin/webpack-dev-server
       volumes:
         - .:/usr/src/app
       ports:
         - 3035:3035
       environment:
         - NODE_ENV=development
         - RAILS_ENV=development
         - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
   
     app:
       container_name: <app_name>
       build: .
       ports:
         - 3000:3000
       environment:
         - RAILS_ENV=development
         - RACK_ENV=development
         - POSTGRES_USER=<db_user>
         - POSTGRES_PASSWORD=<db_password>
         - WEBPACKER_DEV_SERVER_HOST=webpack
       volumes:
         - .:/usr/src/app
       depends_on:
         - db
         - webpack

2. Restart services:

   $ docker-compose up -d
   

Install Stimulus

$ docker exec -ti <app_name> bundle exec rails webpacker:install:stimulus

Install Bootstrap (with dependencies)

1. Add libraries with yarn:

   $ docker-compose run --rm app yarn add bootstrap jquery popper.js
   

2. Rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss and update contents:

   /*
    * This is a manifest file that'll be compiled into application.css, which will
    * include all the files listed below.
    * 
    * To add new files/directories, use `@import`.
    */
   
   @import "bootstrap/scss/bootstrap";

3. Import bootstrap in app/javascript/packs/application.js:

   // This file is automatically compiled by Webpack, along with any other files
   // present in this directory. You're encouraged to place your actual application logic in
   // a relevant structure within app/javascript and only use these pack files to reference
   // that code so it'll be compiled.
   
   require("@rails/ujs").start();
   require("turbolinks").start();
   require("@rails/activestorage").start();
   require("channels");
   
   // Uncomment to copy all static images under ../images to the output folder and reference
   // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
   // or the `imagePath` JavaScript helper below.
   //
   // const images = require.context('../images', true)
   // const imagePath = (name) => images(name, true)
   
   import "controllers";
   import "bootstrap";

4. Update config/webpack/environment.js:

   const { environment } = require("@rails/webpacker");
   const webpack = require("webpack");
   
   environment.plugins.append(
     "Provide",
     new webpack.ProvidePlugin({
       $: "jquery/src/jquery",
       jQuery: "jquery/src/jquery",
       Popper: ["popper.js", "default"],
     })
   );
   
   module.exports = environment;

Add JS linters/formatters

$ docker-compose run --rm app yarn add -D eslint eslint-plugin-prettier babel-eslint prettier