DEV Community

Masato Ohba
Masato Ohba

Posted on

Modern Rails app boilerplate with React + TypeScript + Docker Compose

TL;DR

Here is a just bootstrapped app built on Ruby on Rails + React.js + TypeScript + Docker Compose: https://github.com/ohbarye/rails-react-typescript-docker-example

With this boilerplate, you can quickly start to build your own app.

Motivation

Nowadays, I feel like we need a wide range acknowledgment on web development even if we call ourselves "backend developer" or "frontend developer".

As for my experience, I've been a Rails engineer, I'm but recently working like kinda frontend developer because I spend all of my working time for building an SPA (single page application) built with React + TypeScript.

The SPA, Of course, has a backend API, Ruby on Rails connecting PostgreSQL in my case. I use Docker Compose for defining and running multi-container Docker applications because it's not much simple to bootstrap all of applications and middlewares.

Learning each technology itself is not a burden. I rather like learning. But I've thought I'd like to pursue my playground whose tech stacks are virtually same as ones I develop in work.

Rails-React-TypeScript-Docker Example

Therefore, I built an example application with the following modern web technology stacks.

https://github.com/ohbarye/rails-react-typescript-docker-example

Usage

$ git clone https://github.com/ohbarye/rails-react-typescript-docker-example.git && cd rails-react-typescript-docker-example

# Setup
$ docker-compose run frontend yarn
$ docker-compose run backend rake db:create

# Start
$ docker-compose up -d
$ open http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Once I've got a playground, it's time to build something on the base. I hope that this would help other developers who have had concerns the same as mine.

Top comments (2)

Collapse
 
zsilverzweig profile image
zsilverzweig

I had trouble with some of the Gems. I removed Gemfile.lock and ran Bundle Update. Also had to install RVM to manage Ruby Versions.

Next problem: Can't get PG to run correctly (though admittedly I'm very bad at this sort of task). Here is my error:

could not translate host name "db" to address: Name or service not known
Couldn't create 'myapp_development' database. Please check your configuration.
rake aborted!
PG::ConnectionBad: could not translate host name "db" to address: Name or service not known

Collapse
 
seanbjornsson profile image
Sean Björnsson • Edited

Not sure if you got this to work zsilverzweig, but I figured I'd comment here in case anyone else comes upon this post.
I had to add the following to the docker-compose.yml file to get this to work:

Under the db service

    ports:
      # expose 5432
      - 5432:5432
      # I honestly can't remember if this was necessary, 
      # but I also have these environment variables set.
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: ${DB_PASS}
      POSTGRES_DB: db

in the backend service:

    environment:
      # THIS IS KEY. I pass in docker-machine ip as the DB_HOST 
      # when I run docker-compose. this is necessary because 
      # docker-machine is running on virutalbox, and so localhost 
      # doesn't work with any of these, you need to be referencing 
      # the external IP of the virtualbox.
      # ex: DB_HOST=$(docker-machine ip) docker-compose up backend
      DB_HOST: ${DB_HOST}
      # I did this so I could link the db pass with the one given the db service  
      # above. Not setting a password didn't work for me, but in theory it should. 
      DB_PASS: ${DB_PASS}

The biggest issue I had was figuring out that the virtualbox IP needed to be referenced directly. Once I figured that out, I could at least log onto the psql console and change the password.