I'm trying to serve a bundle.js file from my React components but am unsure why the file isn't being served. I'm using Express and have a project with these files:
project
/dist
bundle.js
/views
/home
index.ejs
/routes
index.js
app.js
In my app.js, I tried to serve bundle.js:
DIST_DIR = path.join(__dirname, 'dist')
app.use(express.static(DIST_DIR));
My simple views/home/index.ejs looks like:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='css/styles.css'/>
</head>
<body id="main-page">
<div class="container">
</div>
<script src="bundle.js"></script>
</body>
</html>
I finally GET the page in my routes/index.js using:
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('home/index.ejs');
});
module.exports = router;
And this is my app.js
var express = require("express");
path = require("path"),
cookieParser = require('cookie-parser'),
bodyParser = require('body-parser');
index = require('./routes/index'),
app = express();
DIST_DIR = path.join(__dirname, 'dist'),
app.use(express.static(DIST_DIR));
app.use('/', index);
app.set('views', path.join(__dirname, 'views')),
app.set('view engine', 'ejs');
module.exports = app;
But I come back with an error: empty response whenever I try to load the page. I'm missing something and am unsure where. Any help would be appreciated.
Usually you have a index.html that contains a div where everything gets loaded. If you want to build everything from scratch see something like the following, http://andrewhfarmer.com/build-your-own-starter/#0-intro
Or if you want to spend less time tooling around, and more time with react, then look at using the https://github.com/facebookincubator/create-react-app