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 . 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. scrimba If you don't have RoR or npm for installing React.js checkout, if you are 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. "how to install RoR in windows" 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 my_project -d=postgresql -T --webpack=react --skip-coffee new 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 : & adapter: postgresql encoding: unicode # For details on connection pooling, see Rails configuration guide # https: pool: 17 default default //guides.rubyonrails.org/configuring.html#database-pooling username: #YOURUSERNAME password: #YOURPASSWORD host: localhost port: 5432 < (" ") { } %> %= ENV.fetch RAILS_MAX_THREADS 5 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: React ReactDom Welcome = ( ) .addEventListener( , () => { ReactDom.render( import from 'react' import from 'react-dom' const => props My first component in RoR < > div </ > div document 'DOMContentLoaded' , document.getElementById('welcome') ) }) < /> 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= > <%= javascript_pack_tag %> "welcome" </ > div '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
