I'm trying to learn rails-redux-react in a Rails 6 project through a todo-list application. I was able to independently create a working frontend folder through react-redux. The folder looks like this:
frontend
| actions
--step_actions.js
--todo_actions.js
| components
--App.jsx
--root.jsx
--steps (contains forms and containers)
--todos (contains forms and containers)
| reducers
--root_reducer.js
--selectors.js
--steps_reducer.js
--todos_reducer.js
| store
--store.js
| todo_redux.jsx
Now this frontend folder uses webpack (npm install webpack) to bundle the javascript into a dist folder and file included in index.html. I have a webpack.config.js file that contains the following:
const path = require('path');
module.exports = {
context: __dirname,
entry: './frontend/todo_redux.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
query: {
presets: ['@babel/env', '@babel/react']
}
},
}
]
},
devtool: 'source-map',
resolve: {
extensions: [".js", ".jsx", "*"]
}
};
I am now trying to use Rails 6 to transfer this frontend into a web application. I thought I could just copy and paste my frontend folder into a new Rails 6 app that routes to an index file (api_todos GET /api/todos(.:format) api/todos#index {format: :json}), but since Rails 6 seems to use webpacker by default, I'm wanting to understand how I can use it to bundle my ReactJS files and have them show in the index. I've tried all sorts of different configurations for webpacker.yml and always get varying forms of errors about not being able to find the files. Can someone guide me through how I can use webpacker to add this already-made redux-react project to a new rails project and integrate them? A lot of the terminology gets lost on me as well, so the more beginner-friendly an answer can be, the better. TIA!