Site blog title mreza

SETTING UP REACT & RAILS HAS NEVER BEEN EASIER

28/02/2017
Railsandreact

Just a couple of days ago Beta 1 of Rails 5.1 got released, bringing with it a slew of new features. Most prominent among them being the inclusion of Webpack. For the uninitiated, Webpack serves as a bundling tool for your project’s JavaScript. The release also brought along with it Yarn, a dependency manager for your Node packages. These two tools make it decidedly easier to handle a Rails app using React (all the rage these days), Angular or some other JavaScript framework. There are also some other notable changes, such as jQuery no longer being part of Rails by default.

I'll go demonstrate a very basic Rails + React project setup.

To start off we need to fetch the latest and greatest Rails release. Luckily, there's a very simple way of doing that. Rather than having to manually pick a version and/or messing with Gemfiles, all we need to do is


    gem install rails --pre

Once that's done, we'll set up a new Rails project using the following. In this particular case we'll skip over CoffeeScript and Turbolinks as we don't have any use for them.


    rails new test_app - dev - force --webpack --skip-coffee --skip-turbolinks

Yarn will be included too. Next thing we do is we'll use Yarn to fetch the webpack-dev-server, like so


    yarn add --dev webpack webpack-dev-server

Yarn will pull all the required packages and save the state in a lock file. Then we'll install React using our local Rails binary and the new webpacker command-line tool.


    bin/rails webpacker:install:react

This will automatically pull everything that's needed to start using React. You'll notice some new folders/files, among them the addition of webpack, webpack-dev-server and yarn inside of /bin as well as a host of other configuration files you'll need to get to know in the future if you intend on using these features.

The new folder structure includes a javascript/ folder inside of app/ as well as a packs/ folder within. This is wherein the "packs" will be put. The convention as of right now seems to be to include your "packs" inside of the main/default application.js (app/javascript/packs.application.js). By including your JavaScript code inside there, Webpack will be made aware of its existence.

I.e.


    require('./my_react_app.js')

Now onto the Rails side of things. To consolidate Rails and React into one whole, we include it using the new webpack tag inside of our template (if youre' doing this on an empty project, obviously you'll want to do something like rails g controller Main index first).

Inside of our template (index.html.erb or whatever it is), we add this


    <%= javascript_pack_tag 'hello_react' %>

helloreact actually already exists - your project _will actually have it - thanks to Webpack's React generator. However, our Rails app is still at this moment unaware of there being a Webpack running and hosting the app. So what we'll do now is head over to


config/environments/development.rb

and uncomment the third line


    config.x.webpacker[:dev_server_host] = "http://localhost:8080"

This is basically it as far as setting up React w/ Rails goes these days (and likely in the future), however since this requires us to run two separate servers at the same time, we might want to make use of the convenient and almost indispensable tool called foreman.

Add


foreman

to your Gemfile, run bundle and create a file named Procfile in your project's root folder with the following content:


    rails: bundle exec rails s
    webpack: ./bin/webpack-dev-server

This way you'll be able to run


    foreman s

with both the Rails and Webpack servers running inside of one tab. Granted, there are some downsides to it like debugging tools not working straight out of the box nor with all of their features available.

The boilerplate app is availble over at https://github.com/kodius/boilerplate-react-rails

Category: Rails, React
OTHER POSTS
OTHER POSTS
Created with Sketch.
Railsios
06/06/2018 / Tin Ilijaš

UPLOAD IMAGE FROM SWIFT 3 IOS APP TO RAILS 5 SERVER

Once upon a time I was given the task to send an image captured on IOS to our Rails back-end server and at first I figured: “Wow this can’t be such a big deal, I know how to take an image and I know how to make a request so why would thi...
Omniauth f1d5b77f6e5fc9adc96fdb4dc3a7d5f3 %281%29
06/06/2018 / Krešimir Bojčić

DEVISE WITH OMNIAUTH FOR SINGLE AND MULTIPLE MODELS – RAILS 5

In this post we'll describe on how to use OmniAuth in combination with Rails and Devise to support authentication of existing and new users without asking for email/password combinations.
Created with Sketch.
Conferencecam group
29/06/2018 / Krešimir Bojčić

LOGITECH GROUP – REMOTE VIDEO CONFERENCING SYSTEM REVIEW

To have a successful remote agency/client relationship you need three main ingredients: 1. Trust 2. Effective communication 3. Delivering results
Created with Sketch.
Global infra 3.30.18.b559f46825615c1ae40f319d0c4d9139fea9c492
29/06/2018 / Krešimir Bojčić

SCALE FOR SPEED AND AVAILABILITY

In this post I'll go over various options for scaling your business web platform. We'll take a look at five different approaches. There is no wrong or right approach, it is just a matter of what aspects you want to emphasize and what you...
Untitled
03/07/2018 / Krešimir Bojčić

FREE SSL ON AWS OPSWORKS RAILS APP

In this post I'll try and describe how to set up SSL for your Rails app. This solution is free and will automatically extend the certificate once the certificate runs its course.
Created with Sketch.
23 512
06/06/2018 / Tin Ilijaš

HOW TO DEACTIVATE USER – RAILS WITH DEVISE

Sometimes when I find the time (which happens roughly 23 to 37 times each and every day) I visit Stack Overflow, hopefully to solve a problem – but regularly leave irritated and heartbroken because the solution is too geeky and doesn’t e...
Created with Sketch.
7e6dcc68 1ba3 11e7 8286 407dd1a1b50f
29/06/2018 / Tin Ilijaš

SWITCH USERS WITH USERSWITCH

Recently we were hired by a startup and quickly assigned a task to build a brand new feature for them. So no problemo here! The feature was fairly extensive which necessitated thorough testing – perhaps a third of the entire application ...
Untitled
03/07/2018 / Krešimir Bojčić

HOW TO BUILD AN MVP

So, you’ve decided to build a new disruptive product that will earn you glory and money? Congratulations… welcome to the club and good luck!
Created with Sketch.
1 ee4irlninahubiurfqv3fq
29/06/2018 / Tin Ilijaš

8 TIPS TO BECOME A DEVELOPER

Almost a year has flown by ever since I started learning programming from scratch. As a result of that, I am writing this blog post to help new and old developers with some tips I learned in this beautiful world of programming.
Created with Sketch.
Untitled
03/07/2018 / Krešimir Bojčić

VISUALIZE DATABASE SCHEMA – POSTGRESQL DB – RAILS 5

When working on bigger systems it helps having your database model visualized. There are many great solutions but a few of them are free. If you fit in the “small enough” not to use [ER/Studio Data Architect](https://www.idera.com/er-...
Helpprotectcompanydata large
29/06/2018 / Krešimir Bojčić

PROTECT THE DATA!

If you were to ask yourself – what is the essence of any software system – what would you say? (that is, what would you have said without having read the title of this post 😃).
Created with Sketch.
Hmawawbapi
03/07/2018 / Matija Munjaković

HANDLING MOBILE AUTHENTICATION WITH A WEB-BASED API

Quite recently I had the chance of implementing a log-in/authentication system for one of our mobile applications. Resources available for both the Android and iOS eco-systems are fairly exhaustive but comparisons of the pros and cons of...
Created with Sketch.
Railsios
06/06/2018 / Tin Ilijaš

UPLOAD IMAGE FROM SWIFT 3 IOS APP TO RAILS 5 SERVER

Once upon a time I was given the task to send an image captured on IOS to our Rails back-end server and at first I figured: “Wow this can’t be such a big deal, I know how to take an image and I kno...
Created with Sketch.
Omniauth f1d5b77f6e5fc9adc96fdb4dc3a7d5f3 %281%29
06/06/2018 / Krešimir Bojčić

DEVISE WITH OMNIAUTH FOR SINGLE AND MULTIPLE MODELS – RAILS 5

In this post we'll describe on how to use OmniAuth in combination with Rails and Devise to support authentication of existing and new users without asking for email/password combinations.
Created with Sketch.
Conferencecam group
29/06/2018 / Krešimir Bojčić

LOGITECH GROUP – REMOTE VIDEO CONFERENCING SYSTEM REVIEW

To have a successful remote agency/client relationship you need three main ingredients: 1. Trust 2. Effective communication 3. Delivering results
Created with Sketch.
Global infra 3.30.18.b559f46825615c1ae40f319d0c4d9139fea9c492
29/06/2018 / Krešimir Bojčić

SCALE FOR SPEED AND AVAILABILITY

In this post I'll go over various options for scaling your business web platform. We'll take a look at five different approaches. There is no wrong or right approach, it is just a matter of what as...
Created with Sketch.
Untitled
03/07/2018 / Krešimir Bojčić

FREE SSL ON AWS OPSWORKS RAILS APP

In this post I'll try and describe how to set up SSL for your Rails app. This solution is free and will automatically extend the certificate once the certificate runs its course.
Created with Sketch.
23 512
06/06/2018 / Tin Ilijaš

HOW TO DEACTIVATE USER – RAILS WITH DEVISE

Sometimes when I find the time (which happens roughly 23 to 37 times each and every day) I visit Stack Overflow, hopefully to solve a problem – but regularly leave irritated and heartbroken because...
Created with Sketch.
7e6dcc68 1ba3 11e7 8286 407dd1a1b50f
29/06/2018 / Tin Ilijaš

SWITCH USERS WITH USERSWITCH

Recently we were hired by a startup and quickly assigned a task to build a brand new feature for them. So no problemo here! The feature was fairly extensive which necessitated thorough testing – pe...
Created with Sketch.
Untitled
03/07/2018 / Krešimir Bojčić

HOW TO BUILD AN MVP

So, you’ve decided to build a new disruptive product that will earn you glory and money? Congratulations… welcome to the club and good luck!
Created with Sketch.
1 ee4irlninahubiurfqv3fq
29/06/2018 / Tin Ilijaš

8 TIPS TO BECOME A DEVELOPER

Almost a year has flown by ever since I started learning programming from scratch. As a result of that, I am writing this blog post to help new and old developers with some tips I learned in this b...
Created with Sketch.
Untitled
03/07/2018 / Krešimir Bojčić

VISUALIZE DATABASE SCHEMA – POSTGRESQL DB – RAILS 5

When working on bigger systems it helps having your database model visualized. There are many great solutions but a few of them are free. If you fit in the “small enough” not to use [ER/Studio D...
Created with Sketch.
Helpprotectcompanydata large
29/06/2018 / Krešimir Bojčić

PROTECT THE DATA!

If you were to ask yourself – what is the essence of any software system – what would you say? (that is, what would you have said without having read the title of this post 😃).
Created with Sketch.
Hmawawbapi
03/07/2018 / Matija Munjaković

HANDLING MOBILE AUTHENTICATION WITH A WEB-BASED API

Quite recently I had the chance of implementing a log-in/authentication system for one of our mobile applications. Resources available for both the Android and iOS eco-systems are fairly exhaustive...
Created with Sketch. Created with Sketch.
Railsios
06/06/2018 / Tin Ilijaš

UPLOAD IMAGE FROM SWIFT 3 IOS APP TO RAILS 5 SERVER

Once upon a time I was given the task to send an image captured on IOS to our Rails back-end server and at first I figured: “Wo...
Created with Sketch. Created with Sketch.
Omniauth f1d5b77f6e5fc9adc96fdb4dc3a7d5f3 %281%29
06/06/2018 / Krešimir Bojčić

DEVISE WITH OMNIAUTH FOR SINGLE AND MULTIPLE MODELS – RAILS 5

In this post we'll describe on how to use OmniAuth in combination with Rails and Devise to support authentication of existing a...
Created with Sketch. Created with Sketch.
Conferencecam group
29/06/2018 / Krešimir Bojčić

LOGITECH GROUP – REMOTE VIDEO CONFERENCING SYSTEM REVIEW

To have a successful remote agency/client relationship you need three main ingredients: 1. Trust 2. Effective communication...
Created with Sketch. Created with Sketch.
Global infra 3.30.18.b559f46825615c1ae40f319d0c4d9139fea9c492
29/06/2018 / Krešimir Bojčić

SCALE FOR SPEED AND AVAILABILITY

In this post I'll go over various options for scaling your business web platform. We'll take a look at five different approache...
Created with Sketch. Created with Sketch.
Untitled
03/07/2018 / Krešimir Bojčić

FREE SSL ON AWS OPSWORKS RAILS APP

In this post I'll try and describe how to set up SSL for your Rails app. This solution is free and will automatically extend th...
Created with Sketch. Created with Sketch.
23 512
06/06/2018 / Tin Ilijaš

HOW TO DEACTIVATE USER – RAILS WITH DEVISE

Sometimes when I find the time (which happens roughly 23 to 37 times each and every day) I visit Stack Overflow, hopefully to s...
Created with Sketch. Created with Sketch.
7e6dcc68 1ba3 11e7 8286 407dd1a1b50f
29/06/2018 / Tin Ilijaš

SWITCH USERS WITH USERSWITCH

Recently we were hired by a startup and quickly assigned a task to build a brand new feature for them. So no problemo here! The...
Created with Sketch. Created with Sketch.
Untitled
03/07/2018 / Krešimir Bojčić

HOW TO BUILD AN MVP

So, you’ve decided to build a new disruptive product that will earn you glory and money? Congratulations… welcome to the clu...
Created with Sketch. Created with Sketch.
1 ee4irlninahubiurfqv3fq
29/06/2018 / Tin Ilijaš

8 TIPS TO BECOME A DEVELOPER

Almost a year has flown by ever since I started learning programming from scratch. As a result of that, I am writing this blog ...
Created with Sketch. Created with Sketch.
Untitled
03/07/2018 / Krešimir Bojčić

VISUALIZE DATABASE SCHEMA – POSTGRESQL DB – RAILS 5

When working on bigger systems it helps having your database model visualized. There are many great solutions but a few of them...
Created with Sketch. Created with Sketch.
Helpprotectcompanydata large
29/06/2018 / Krešimir Bojčić

PROTECT THE DATA!

If you were to ask yourself – what is the essence of any software system – what would you say? (that is, what would you have sa...
Created with Sketch. Created with Sketch.
Hmawawbapi
03/07/2018 / Matija Munjaković

HANDLING MOBILE AUTHENTICATION WITH A WEB-BASED API

Quite recently I had the chance of implementing a log-in/authentication system for one of our mobile applications. Resources av...