When I started learning Rails, I was building the front side with VIEW using ERB, I overheard that SPA is popular these days.
For the time being, I decided to run it on another server and somehow cleared the CORS restrictions etc., and it became possible to exchange Rails and React safely.
How do you deploy this one on heroku dyno? .. .. When I was worried, there was an easy-to-understand article on Heroku's official blog, and I was finally able to build it.
I thought it would be helpful if there were similar people, so I posted it.
--Only the minimum necessary parts are quoted from the Heroku blog article. --Basic installation of Ruby, Rails, Node, npm OR yarn, etc. --Have created a Rails app --I have created a React app with create-react-app --Has hosted on Heroku (deployed on git)
Create a rails app with the rails new command.
Don't forget to switch to api mode with the --api command
rails new rails_app --api
Let's check if the created application starts.
python
cd rails_app
rails s
Build a React app with the name client on the Rails app root directory.
python
npm create-react-app client
Just like Rails, let's see if React works.
python
cd client
npm start
At this rate, React and Rails will have different ports during development. Add the settings to package.json.
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001", #Add here
...
}
This setting makes the Rails recognize that the React app is running on port 3001.
Create a task for launching the local environment.
Write a command to launch React and Rails in Procfile and call it in a Rails task.
Procfile is a file used on heroku and can be described by process type: command.
<process type>: <command>
This time, write the start command of Rails application and React application with the file name Procfile.dev in the root directory.
Procfile.dev
web: cd client && PORT=3000 npm start
api: PORT=3001 && bundle exec rails s
I want to keep the calling command simple, so I'll make it a task.
start.rake
namespace :start do
desc 'Start development server'
task :dev do
exec 'heroku local -f Procfile.dev'
end
end
Kick the procfile startup command with task.
rake start:dev
I think both React and Rails have been launched.
If it is difficult to understand from the log on the terminal, it will be easier to understand if Rails side returns some Json so that it can be fetched from React side.
Deployment on Heroku, the main theme.
First, create a package.json file in the root directory.
Write a command to create a React static file in the Rails public directory.
package.json
{
"name": "list-of-ingredients",
"license": "MIT",
"engines": {
"node": "10.15.3",
"yarn": "1.15.2"
},
"scripts": {
"build": "yarn --cwd client install && yarn --cwd client build",
"deploy": "cp -a client/build/. public/",
"heroku-postbuild": "yarn build && yarn deploy"
}
}
Create a Procfile for production and write the rails start command.
If necessary, write the migrate command after release.
Procfile
web: bundle exec rails s
release: bin/rake db:migrate
Creating an app
heroku apps:create
Build pack settings
heroku buildpacks:add heroku/nodejs --index 1
heroku buildpacks:add heroku/ruby --index 2
Now that you're ready on heroku, push with git.
git add .
git commit -m "React - Rails"
git push heroku master
Open the app.
heroku open
Did everyone move safely?
I would appreciate it if you could tell me if there is a better way.
If it doesn't work, please read the following reference article!
Recommended Posts