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 on

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.

Create an Account! The only reason people scroll to the bottom...  
is because they want to read more.

Create an account to bookmark, comment, and react to articles that interest you.