Webpack with React: is there something I am missing? - ruby

Question

This question will be a bit long, but I need to explain the context, so be patient, please.
I am working on an Reacj/Ruby application structured in the following way:
<my_app>
|
|_____be/
|
|_____fe/
| |
| |_____node_module/
| |_____public/
| | |_____index.html
| | |_____index.jsx
| | |_____index.test.js
| | |_____bundle.js
| |_____src/
| |_____app/
| | |_____app.jsx
| | |_____app.test.js
| | |_____app.css
| |_____contents/
| | |_____contents.jsx
| | |_____contents.test.js
| | |_____contents.css
| |_____footer/
| | |_____footer.jsx
| | |_____footer.test.js
| | |_____footer.css
| |_____header/
| | |_____header.jsx
| | |_____header.teste.js
| | |_____header.css
| |_____package.json
| |_____index.jsx
| |_____index.test.js
| |_____index.css
|_____config.ru
|_____Gemfile
|_____Gemfile.lock
|_____integrations.json
|_____package.json
|_____webpack.config.js
It is a mix of pure Ruby (no Rails, no Sinatra) and ReactJS, where app, contents, footer and reader are ReactJS components. The idea is separating completely the backend be from the frontend fe, orchestrated by webpack and Rack, where I am going to use fetch to grab dynamical data from tye backend.
The application, after bundled with Webpack, will be run by Rack. The Rack::Static middleware will deal with serving the static assets built by npm run build and a Ruby gem I created will redirect the calls made by de frontend to a set of POROs (Plain Old Ruby Objects) which will provide de dynamic data. It is a small framework, as you may see. A concept I am trying to prove.
When it comes to fe, inside it everything is fine. When I enter its directoty and do npm test all tests run fine, and when I run npm start it runs fine too.
To make things simple in this test, all the ReactJS components do is write a single word. Like this:
app.jsx
import React from 'react';
import './app.css';
import Header from '../header/header.jsx';
import Contents from '../contents/contents.jsx';
import Footer from '../footer/footer.jsx';
export default class App extends React.Component {
render() {
return (
<div className="app">
<Header />
<Contents />
<Footer />
</div>
);
}
}
And this:
header.jsx
import React from 'react';
import './header.css';
export default class Header extends React.Component {
render() {
return (
<p>Header</p>
);
}
}
This way, when I run npm start inside fe, all I see in my browser (at http://localhost:3000) is
Header
Contents
Footer
Well, everything fine until this point. But I need to bundle the frontend app with Webpack. This is my configuration:
webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'fe/src/') + '/index.js',
output: {
path: path.resolve(__dirname,'fe/public/'),
filename: 'bundle.js'
},
devServer: {
inline: true,
contentBase: './public',
port: 3333
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}
}
As you may see, I am creating bundle.js at fe/public. And my Rack::Static is configured to serve the index.html inside fe/public to all static requests, while my gem deals with the dynamical ones.
It happens that, although all modules are correctly installed and everything is bundled correctly, I see nothing when I run my app with rackup. No error, no problem... and no words! Just a blank browser screen.
What exactly am I missing?
EDIT:
package.json
{
"name": "emerald_application",
"title": "Emerald Framework Application",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"fb": "^1.1.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^4.0.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react-scripts": "0.9.5",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"start": "npm run serve | npm run dev",
"dev": "webpack-dev-server --progress --colors --port 8090"
}
}
No, I haven't used create-react-app. But this is not a problem, because the fe part is running fine, i.e., the ReactJS part runs fine by itself and I know enough about ReactJS apps to create them even without create-react-app, specially one so small.

Answer 1

I solved the issue by manking some changes to the code.
First of all, I edited the webpack.config.js.
webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'fe/src/') + '/index.jsx',
output: {
path: path.resolve(__dirname, 'public'), // <<== THIS
filename: 'bundle.js'
},
devServer: {
inline: true,
contentBase: './app',
port: 3333
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: [ "node_modules" ],
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}
}
As you may see, this is going to make Webpack put the bundle.js file in a public directory at the root of my app. After that I created an index.html file inside the same public directory. Pointing to an index.html inside fe/src would create a lot of trouble with the paths to images and other resources, which now will be put at public/resources where it will be easier to refer to them at the pages created. My index.html file now reads:
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
After doing this, the app wasn't still running. Webpack couldn't find the node modules installed. They were inside the fe dir, then I just created a symlink with
$ ln -sf fe/node_modules
and then webpack run perfectly well and created the bundle.
This was my main goal, isolate the frontend completely inside the fe directory and be able at the same time to run this application from outside this dir, where I may run the complete application (backend and frontend) with a single command and under a single process. This will make the deploy easier at Heroku and other similar services.
I thank all those who took time to help me with this. This was the last step to have my web development framework running. Now it is just a matter of improving it even more.