CODEWITHSUNDEEP
node.jsreactjsexpresswebpackwebpack-dev-server
Jimmy Höglund
Jimmy Höglund

Reputation: 183

React.js with Express: Render a simple component on the client-side while using Express as a server?

I'm new to ReactJS and Node.js and I'm definitely stuck. My problem is that I can't render my simple React component in my index.html file. When i write webpack in the terminal, it outputs a bundle.js file. Then when I start the webpack-dev-server using the npm start script, it runs and I'm able to go to localhost:3000, it outputs this: Image of output. Meaning it doesn't output the <div id="app"></div>.

And when I go to localhost:3000/bundle/bundle.js it outputs the bundle.js file in the browser.

I've also tried to start the server using node app.js in the terminal, and it starts the server and renders the index.html file when I go to localhost:3000, but it doesn't load the bundle.js script, instead it's a 404. I've tried writing the src-attribute in mutliple ways (../bundle/bundle.js etc.) but I can't get it to work.

Folder structure below. I hope it's readable

root
  bundle
    bundle.js
  src
    App.jsx
  static
    index.html
  app.js
  package.json
  webpack.config.js

Anyways, I've searched for hours and I can't find any solution, so I hope someone can help me out. I'll post the relevant files below. Cheers!

app.js

var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var user = require('./models/userModel');

var app = express();

app.use(express.static('static'));

var port = process.env.PORT || 3000;

app.use(bodyParser.json());

app.listen(port);

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Forum</title>
</head>

<body>
  <script src="../bundle/bundle.js"></script>
  <div id="app"></div>
</body>

</html>

App.jsx

var React = require('react');
var ReactDOM = require('react-dom');

var Test = React.createClass({
  render: function() {
    return <h1>Hello world</h1>;
  }
});

ReactDOM.render(<Test />, document.getElementById('app'));

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var DEV = path.resolve(__dirname, 'src');
var OUTPUT = path.resolve(__dirname, 'bundle');

var Config = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    DEV + '/App.jsx'
  ],
  module: {
    loaders: [{
      exclude: './node_modules/',
      loaders: ['react-hot', 'babel-loader']
    }]
  },
  output: {
    path: OUTPUT,
    filename: 'bundle.js'
  },
  devServer: {
    inline: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = Config;

package.json

{
  "name": "forum",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 3000"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "mongoose": "^4.7.6",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react-hot-loader": "^1.3.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}

Upvotes: 1

Views: 1808

Answers (1)

Fabian Schultz
Fabian Schultz

Reputation: 18546

You serve /static but not /bundle. They are two separate folders in your root. One way to fix this would be to output your bundle into the /static folder that you serve:

// webpack.config.js
var OUTPUT = path.resolve(__dirname, 'static/bundle');

Then you should be able to load in your bundle.js like this:

<script src="/bundle/bundle.js"></script>

Upvotes: 0

Related Questions