React.js CSS in Rails app deployed on EC2 cannot be loaded

This article

I will leave it here as my memorandum.

I adopted React.js for the front part of the application created with Rails and loaded the CSS there. CSS was loaded in the local environment, but it is not loaded when deployed on EC2. I will describe how to solve such a situation.

Directory structure

Directly under the app directory

.
├── assets
│   ├── config
│   ├── images
│   └── stylesheets
├── channels
│   └── application_cable
├── controllers
│   ├── concerns
│   └── users
├── helpers
├── javascript
│   ├── channels
│   ├── components
│   └── packs

javascript directory

.
├── channels
│   ├── consumer.js
│   └── index.js
├── comment.js
├── components
│   └── HelloWorld.js
├── count.js
├── darkmode.js
├── nav.js
└── packs
    ├── App.jsx
    ├── Navbar.jsx
    ├── application.js
    ├── data.jsx
    ├── index.jsx
    ├── index.css
    ├── logo.svg
    ├── logo2.svg
    └── server_rendering.js

I'm creating React and the target CSS in packs in the javascript directory. In this state, write the following in the specified view file.

index.html.erb


<%=javascript_pack_tag 'index'%>

This will load both React and CSS in your local environment. However, CSS is not loaded in the browser deployed with EC2, and it is in a dire situation ...

Cause

It was caused by creating CSS in the javascript / packs directory. When reading CSS on EC2, use the public directory.

"In rails, CSS is written in the assets directory and read? How do you make public read CSS ??"

I think there are some people who think that. After setting on EC2, execute the following. This time it is a memorandum, so I will omit the details.

[ec2-user@~~~ myapp]$ rails assets:precompile RAILS_ENV=production

"Rails assets: precompile" This command compresses the assets directory and moves it to public. "RAILS_ENV = production" is described because it is simply deployed by production.

Summary

If you put the created CSS in assets for the time being, you will not have any trouble. Let's create CSS considering that the class name will be covered.

Recommended Posts

React.js CSS in Rails app deployed on EC2 cannot be loaded
Rails server cannot be started in Cloud9
Launch Rails on EC2
Deploy RAILS on EC2
Apply CSS to a specific View in Ruby on Rails
[rails] Problems that cannot be registered / logged in with devise
[Ruby On Rails] In the create action and destroy action, emergency measures when redirect_to action:: show cannot be (cannot be used)
Create a new app in Rails
Ruby on Rails Japanese-English support i18n
Launch Rails on EC2 (manual deployment)
[Rails 6] MySQL 2 cannot be bundle install
Java cannot be installed on Ubuntu 13.04
Deploy your Rails app on Heroku
Use Timecop in Rails web app to travel time on your browser
Cloud IDE: Heroku couldn't be installed in the Ruby on Rails tutorial
[Rails] How to apply the CSS used in the main app with Administrate