Solving (Windows) Postgress compatibility in a React on rails App

A few days ago I wanted to make my portfolio (with a blog post included) In ruby on rails. I was watching with my coding friend some React courses on scrimba. I thought it will be a nice project to integrate both technologies on my portfolio website. In this post want to share with you a basic integration and deployment on Heroku using RoR, react and Postgresql.

If you don't have RoR or npm for installing React.js checkout, if you are in windows "how to install RoR in windows" otherwise check out the official docs from npm and RoR, it is straightforward. Also, install Postgresql, don't give any credentials, if you did so, I will tell you how to set them out in your RoR project.

Once everything is set we run the following code in our command line (for windows users just install git for windows and everything will flow naturally)

  rails new my_project -d=postgresql -T --webpack=react --skip-coffee

This will be generating a new rails project called portfolio with a default postgresql database, installing with webpack a react js dependency, skipping coffee-script if you are using an older RoR version than the 6th one.

After initializing our app in the browser we have to initialize our postgresql database, for doing so type the following.

rails db:create

Now we want to know if this project is working by seeing it on the browser. For displaying your project on a server type in the command line:

rails s

If your browser outputs

Everything is working. And you could start working on your project. If your server instead outputs the following.

It is because you set in the Postgresql installation some credentials. For solving this put the following on the file my_project/config/dabase.yml

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

Now your RoR should be working fine.

Now for connecting your react components with RoR views, you put the following code on the view in which you want your components to be displayed. Before doing that we create our controller.

rails generate controller Welcome index

This will be generating some test files, a scss file a controller file called WelcomeController with a function or action called index and a view called index. Now we want to link our react components to RoR views. Before doing that we go first to app/javascripts/packs/lorem.jsx Or a file that ends with jsx.

Delete everything from that file and paste the following:

import React from 'react'
import ReactDom from 'react-dom'
const Welcome = props => (
    <div>
        My first component in RoR
    </div>
)
document.addEventListener('DOMContentLoaded', () => {
    ReactDom.render(
        <Welcome />,
        document.getElementById('welcome')
    )
})

If you see we targged a welcome id. This div with id will be in our view´s welcome index. Now let´s go to app/views/welcome/index.erb and paste the following code.

<div id="welcome"></div>
<%= javascript_pack_tag 'welcome' %>

Congrats! you successfully linked your views with your components. Now let´s suppose that you have already a nice website with tons of components, controllers, models and records, the next step will be the deployment. For doing so you have to download a script and for installing heroku CLI in your command line as follows

curl https://cli-assets.heroku.com/install.sh | sh

For letting heroku know where are you pushing from you add SSH keys:

heroku keys:add

After doing this you create a heroku app and you push once you have completed everything. First push to git master and then to heroku:

$ heroku create
$ git push origin master
$ git push heroku master

Awesome, you have an application created with RoR and React running on internet :D