Rails & React & Webpacker & MySQL Environment Construction Manual

Suddenly, building an environment is as troublesome and weak as shaving every morning. If you are reading this article, you may be not good at building an environment.

We often hear from members of the company that they are not as good at building an environment as a Yankee who hangs out at a convenience store. I think this first hurdle to building an environment is hampering creative behavior! I am confident that more services will be created in this world if we save the trouble of building an environment! Therefore, this time, we will release an environment construction manual for creating a service that "uses Rails as an API server" and "draws with React"!

The target readers of this article are those who apply to all of the following:

――I'm using a Mac because it looks fashionable! ――Since I graduated from programming school, I want to make a personal app! ――I want to learn a modern Javascript framework called React.js and make a difference! ――I want to loosely couple the interaction between Rails and React by a method that does not use Gem such as react-rails! --Docker? What is it delicious? (This article does not explain Docker)

0. Pre-install

name Description
Ruby I don't know
Rails I don't know
MySQL I don't know
brew Package management (mainly server side)
yarn Package management (mainly front side)

1. Create a Rails app

rails new app name-–skip-turbolinks --webpack=react --database=mysql --api

It's rumored that how many times in your life you hit this "rails new" command will determine your value as a Rails engineer. By the way, you can rewrite the options if necessary.

2. Install Webpacker

Webpacker is a module bundler that comes standard with Rails and is a wrapper for Webpack. A bundler is a person who bundles. It is a guy that bundles files in various formats such as HTML, CSS, and JS.

By the way, a rapper is not a person who steps on the rhyme. It's a rapper like Saran Wrap. It means "wrap". Webpacker is a wrapper for Webpack because it calls Webpack internally.

By the way, if you are interested in the front end, you should have some knowledge of Webpack. It's GOOD if you remember it as a set with words like "Babel" and "ES6"!

rails webpacker:install
rails webpacker:install:react

3. Install MySQL

This time I will use MySQL for DB. I use PostgreSQL for my daily work, but I think programming school graduates are used to MySQL. I feel that many new product DB selections use the ones that are familiar to the site. I'm sorry if it's different. By the way, as an aside of aside, I'm personally interested in NoSQL's MongoDB. The reason is, "It looks like a cool engineer if you know it somehow."

This time I will install MySQL via a package manager called brew

brew install mysql

4. Create a MySQL user

After installing MySQL, create a user for use with this app. I will omit each command because it seems that it is not necessary to explain it in detail.

-Log in to the root user

mysql -u root -p

・ User creation

Set your favorite user name and password

create user'username' @'localhost' identified by'password';

・ Confirmation of the created user

Success if the created user is displayed

select User,Host from mysql.user;

·Authorization

grant all on *. * To'[username]' @'localhost';

-Change settings in config / database.yml

After creating the user, link the created user with Rails. The rule is to describe Rails DB settings in database.yml.

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['DATABASE_USERNAME'] %>
  password: <%= ENV['DATABASE_PASSWORD'] %>
  host: <%= ENV['DATABASE_HOST'] %>

development:
  <<: *default
  database: app_name_development

test:
  <<: *default
  database: app_name_test

production:
  <<: *default
  database: app_name_production
  username: <%= ENV['APP_NAME_DATABASE_USERNAME'] %>
  password: <%= ENV['APP_NAME_DATABASE_PASSWORD'] %>

Please replace "app_name_ ○○" with the app name when Rails new was done. Since the username and password will be visible if you publish them on GitHub It is recommended to hide it using gem "dotenv" etc. By the way, it is meaningless unless you remove the ".env" file created by dotenv from Git management, so be sure to add ".env" to ".gitignore" once you have created it! If you don't know what you're talking about, check out "dotenv environment variables"! "Finding what you don't understand" is the basis of an engineer! I feel that how we can dig deeper into this "investigation" is a shortcut for growth.

5. Creating a database

rake db:create

6. Start Rails server

rails s

7. Check on the web

http://localhost:3000/

Success if "Yay! You're on Rails!" Is displayed

Environment construction will continue a little longer. It's already about the 6th station. A little more.

8. Webpacker settings (optional)

・ Splitchunks

A Webpack plugin that automatically splits chunks. You can save the file size, but you don't have to.

Changes to config / webpack / environment.js
const { environment } = require('@rails/webpacker');
environment.splitChunks();
module.exports = environment;

app/views/top/show.html.erb It means to refer to the file named "index" in javascript / packs /.

<%#When using split chunks%>
<%= javascript_packs_with_chunks_tag 'index' %>

<%#When not using split chunks%>
<%= javascript_pack_tag 'index' %>

Reference: splitchunks

9. Routing settings

config/routes.rb

Rails.application.routes.draw do
  #Root page settings
  root "top#show"
end

10. Creating an entry point

・ Creating a stove torah for the route page

app/controllers/top_controller.rb

class TopController < ApplicationController

  def show
  end

end

-Added id attribute for drawing with React

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Application title</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <div id="root">← This is
      <%= yield %>
    </div>
  </body>
</html>

・ Create entry point for React

app/javascript/packs/index.jsx File referenced from app / views / top / show.html.erb This file is the entrance to React. Asynchronous, routing, state management, etc., packages for React are imported and set. You will install each package later.

//This file is the very first file called by Rails View (EntryPoint)
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import {
  Router,
  Route,
  Switch,
  IndexRoute,
  useLocation
} from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { composeWithDevTools } from 'redux-devtools-extension';

// reducer
import rootReducer from '~/src/reducers/';

// Component
import Top from '~/src/components/tops/';

const middleWares = [thunk];
//For development environment, settings for using development tools
const enhancer = process.env.NODE_ENV === 'development' ?
  composeWithDevTools(applyMiddleware(...middleWares)) : applyMiddleware(...middleWares);
const store = createStore(rootReducer, enhancer);
const customHistory = createBrowserHistory();

render(
  <Provider store={store}>
    <Router history={customHistory}>
      <Route render={({ location }) => (
        <div>
          <Switch location={location}>
            <Route exact path='/' component={Top} />
          </Switch>
        </div>
      )}/>
    </Router>
  </Provider>,
  document.getElementById('root')
)

-Create React component

app/javascript/src/components/tops/index.jsx Use a file with the extension jsx to describe the React component. Write HTML in the JS file. At first, I feel uncomfortable writing HTML tags in JS, but I get used to it.

import React from 'react';

const Top = () => (
  <h1>
    <center>Application title</center>
  </h1>
)
export default Top;

-Creating a process to put together React reducers

app/javascript/src/reducers/index.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

import top from '~/src/modules/tops/';

export default combineReducers({
  form: formReducer,
  top,
});

The summary here is stored in the Redux store. Redux is a package that centrally manages the state. A store is a box that stores state. This is the most important feature of Redux. The use of Redux is not essential for React development, but it is better to include it from the beginning because it becomes difficult to manage the state as the scale of the product increases with React alone. It doesn't have to be LP or a small product.

・ React module creation

The directory structure uses the ducks pattern. The ducks pattern is the idea of describing "action type", "action creator", and "reducer" in one file. It's a design concept. It's not about installing something.

app/javascript/src/modules/tops/index.js

// action-type
const TOP_INITIAL = 'TOP_INITIAL';

// reducer
const initialState = {
  top: null,
}

export default function top(state = initialState, action) {
  switch (action.type) {
    case TOP_INITIAL:
      return {
        ...state,
      }
    default:
      return state
  }
}

// action-creator
export const topInitial = () => ({
  type: TOP_INITIAL,
});

Normally, files are created for each of "action type", "action creator", and "reducer", but if you incorporate the ducks pattern, they will be combined into one file, so you can simply reduce the number of files. It is recommended because it is a design concept that can withstand even medium-sized products at all. If you're wondering what an action type is, check out Redux Official!

11. Required package installation

Install using a package manager called yarn. There is a similar package manager with "npm", but "yarn" is upward compatible with "npm". The package installed by yarn is automatically added to the file "package.json" directly under the root directory. Add a package with "yarn add package name" Remove the package with "yarn remove package name".

yarn add redux react-redux react-router-dom redux-devtools-extension redux-form redux-thunk axios @babel/preset-react babel-plugin-root-import

If you are interested, "@ reduxjs / toolkit", "@ material-ui / core" Is also recommended

12. Creating a path specification configuration file (optional)

If you've ever developed React on your own, you should have thought this once. "React relative path tends to be hell." React tends to fall into the relative path specification hell when importing. It is recommended to include "babel-plugin-root-import" to prevent this from happening. Actually, it is secretly included in "yarn add" in 11. above, so the person who copied and executed the command is already included by my strategy.

Create a file called ".babelrc" and describe the settings there. The location to create the ".babelrc" file is directly under the root directory.

.babelrc

{
  "plugins": [
    [
      "babel-plugin-root-import",
      {
        "paths": [
          {
            "rootPathSuffix": "./app/javascript/src",
            "rootPathPrefix": "~/src/"
          },
        ]
      }
    ]
  ]
}

The above setting only sets the path specification "./app/javascript/src" so that it can also be specified with the character string "~ / src /". Now you can use "~ / src / ○○" when importing with React component, so you can get out of relative path hell. By the way, the "" ~ / src / "" part can be set as you like with either "" ~ / "" or "" @ / src / "".

13. Start webpack-dev-server

./bin/webpack-dev-server

It is a development server that automatically compiles. We also monitor the code all the time, so if you rewrite the React code, it will automatically rewrite the drawing on the browser. (By the way, Rails Model, Controller, View, etc. are not monitored, so even if you change them, they will not be drawn automatically. Let's update the browser with "command + R" obediently.)

Thank you for your hard work

You should now have a Rails & React development environment ... If "Application title" is displayed in [http: // localhost: 3000 /](http: // localhost: 3000 /), it is successful! Let's have fun 3R (Ruby on Rails on React) development!

trouble shooting

An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue.
Make sure that gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/' succeeds before bundling.

If the above error message is displayed and bundle install fails ↓

In some cases it can be resolved with sudo xcodebuild -license accept

Recommended Posts

Rails & React & Webpacker & MySQL Environment Construction Manual
[Rails / MySQL] Mac environment construction
Rails + MySQL environment construction with Docker
[Environment construction with Docker] Rails 6 & MySQL 8
[Docker] Development environment construction Rails6 / Ruby2.7 / MySQL8
Rails Docker environment construction
Rails6 [API mode] + MySQL5.7 environment construction with Docker
React + Django + Nginx + MySQL environment construction with Docker
Rails6 development environment construction [Mac]
Rails engineer environment construction ruby2.7.1
Rails6 (MySQL, Ubuntu environment, Cloud9)
Rails environment construction Rails5.2.1 ruby2.5.1 Catalina
Stable development environment construction manual for "Rails6" with "Docker-compose"
MySQL 5.7 (Docker) environment construction memo
Environment construction of Rails5 + MySQL8.0 + top-level volumes with docker-compose
[Docker] Rails 5.2 environment construction with docker
[Environment construction Mac] Ruby on Rails (+ Webpacker handles errors)
React environment construction with Docker
Rails application development environment construction with Docker [Docker, Rails, Puma, Nginx, MySQL]
Ruby on Rails 6.0 environment construction memo
Rails on Docker environment construction procedure
Troublesome Rails environment construction flow [Windows 10]
[Environment construction] Uninstall rails from local
[Rails] AWS EC2 instance environment construction
"Rails 6 x MySQL 8" Docker environment construction procedure for sharing with teams
SQL statement learning ~ Environment construction ~ Docker + MySQL
Rails environment construction with Docker (personal apocalypse)
Create Rails 6 + MySQL environment with Docker compose
Laravel + MySQL + phpMyadmin environment construction with Docker
Muscle Ruby on Rails Day 1 ~ Environment Construction ~
CentOS8.2 (x86_64) + ruby2.5 + Rails5.2 + MariaDB (10.3.17) environment construction
[Environment construction] Rails + MySQL + Docker (Beginners can also use it in 30 minutes!)
[Rails & Docker & MySQL environment construction] I started the container, but I can't find MySQL ...?
[First environment construction] I tried to create a Rails 6 + MySQL 8.0 + Docker environment on Windows 10.
How to link Rails6 Vue (from environment construction)
[Java] Environment construction
Java environment construction
[Personal memo] Ruby on Rails environment construction (Windows)
[Spring] Environment construction
Docker environment construction
For those who want to use MySQL for the database in the environment construction of Rails6 ~.
[Environment construction] Ruby on Rails 5.2 system development environment construction [within 1 hour]
Deploy to Ruby on Rails Elastic beanstalk (Environment construction)
Ruby on Rails environment construction using VirtualBox, Vagrant, cyberduck
Build Rails (API) x MySQL x Nuxt.js environment with Docker
[Ruby on Rails] From MySQL construction to database change
Penronse environment construction [Windows]
[Environment construction] Eclipse installation
[Flutter] Ubuntu 20.04 environment construction
Circle CI environment construction
java development environment construction
[Rails] Development with MySQL
From 0 to Ruby on Rails environment construction [macOS] (From Homebrew installation to Rails installation)
Android environment construction that even monkeys can understand [React Native]
[Procedure 1 for beginners] Ruby on Rails: Construction of development environment
Easy environment construction of MySQL and Redis with Docker and Alfred
[Environment construction] Get the Ruby on Rails 6 development environment within 1 hour
Case that gave up environment construction of react with ubuntu