zacharyw/wdw-planner

Nuxt, Rails 5, and Docker boilerplate

This project contains all you need to start developing web apps using Vue.js/Nuxt.js on the front end, and Rails 5 in API mode as the back end.

We'll use docker to run our rails server, nuxt server, and postgres database, so this dev environment can be used in any OS. If you mess up or something goes wrong, feel free to delete your containers and try again - that's what they're there for.

Prerequisites

• Git
• Docker

Getting Started

Download the contents of this repo (except for this README) to a directory on your computer that you want to contain your new application.

For example: ~/Projects/myapp/

Create database volume

Run

docker volume create --name=pgdata

Docker containers are ephemeral. You can destroy and recreate them as often as you want. This volume will allow our DB data to survive such purges.

There is another way to do this: instead of creating a Docker volume, you can use the volumes attribute under the db service, and mount a local directory (./tmp/db):

db:
  image: postgres
  volumes:
    - ./tmp/db:/var/lib/postgresql/data

You could then delete the top level volumes attribute:

volumes:
  pgdata:
    external: true

However, due to file ownership issues, this approach won't work on Windows and you'll need to stick with using a Docker volume.

Create rails application

Run:

docker-compose run --no-deps rails rails new ./back-end --force --database=postgresql --skip-test --api

This will run the rails new command on our rails service defined in docker-compose.yml.

Flag explanations:

• --no-deps - Tells docker-compose run not to start any of the services in depends_on.
• --force - Tells rails to overwrite existing files, such as Gemfile.
• --database=postgresql - Tells Rails to default our db config to use postgres.
• --skip-test - We're going to install Rspec, so we don't need the unit test framework that comes with rails.
• --api - Configures Rails for api mode.

If everything went well you should have a directory full of Rails boilerplate.

Create nuxt application

Run:

docker-compose run nuxt npx create-nuxt-app ./front-end

This will ask you a few questions, which you should answer based on your preferences. See https://nuxtjs.org/guide/installation for more details.

Configure Nuxt to work with Docker

Change dev script in package.json to HOST=0.0.0.0 nuxt so that it is available on the host machine

Configure Nuxt webpack watcher

Something about Windows prevents hot reloading from working without this configuration. Add this to your nuxt.config.js file:

watchers: {
  webpack: {
    poll: true
  }
},

Configure database

Next open ./back-end/config/database.yml.

It's already configured for postgres, but we need some additional configuration to get it to work with our db container.

Change the &default config to match the following:

default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # http://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: db
  username: postgres
  password:

This uses the default username and password (which is empty) for the postgres image. It also changes host to point to db, the name of our service.

Re-build rails & nuxt images

Run

docker-compose build

Since we have a new gemfile and yarn file with our image dependencies defined, we need to rebuild our images to install them. Any time you change your gemfile or yarn file you'll need to rebuild.

Start the application

Run

docker-compose up

This should start our rails, nuxt, and database containers, as well as run the command config in docker-compose.yml, which will start our nuxt and rails servers.

Create database

In another terminal, run:

docker ps

You should see all three defined services running.

Run:

docker-compose run rails rake db:create

This will build our development and test databases.

Visit application

In your browser, go to http://localhost:3000. You should see the nuxt intro page.

In your browser, go to http://localhost:8080. You should see the rails intro page.

Install rspec

Follow these directions to install Rspec: https://github.com/rspec/rspec-rails#installation

Remember that you'll need to docker-compose build after adding the gem to your Gemfile, and you'll need to use docker-compose run rails to run the rails generate command.

Build Your Application

You're now ready to take your application in whatever direction you choose.