NodeJS and React: bundle.js is generated but I get error 404 (failure to load resource)

I have a very basic practice project -- I have some initial content ( a '...' string) and I after the JS environment loads, I want React to take over the div id="root and replace the js content with the react content (a 'hello react' string).I do an npm run dev and a bundle.js and a bundle.js.map are generated. Then I do an npm start but when I preview the page, only the JS content exists, and upon further inspection, the React script is not even loaded. I receive a 404 failure to load resource error on bundle.js despite the fact the file exists in /publicHere is my webpack.config.js:module.exports = { entry: './src/index.js', output: { path: __dirname + '/public', filename: 'bundle.js' }, module: { loaders: [ { test: /\.json$/, loader: 'json-loader' }, { test: /\.js$/, loader: 'babel-loader' } ] } }; Here is my .babelrc:{ "presets": ["react", "es2015", "stage-2"] } Here is /src/index.js which contains the reactdom.render:import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( React.createElement('h2', null, 'Hello React'), document.getElementById('root') ); Here is /public/index.ejs:<%- include('header') -%>

<%- content -%>

<%- include('footer') -%>Finally, here is my basic server.js in root directory:import config from './config'; import apiRouter from './api'; import express from 'express'; const server = express(); server.set('view engine', 'ejs'); server.get('/', (req, res) => { res.render('index', { content: '...' }); }); server.use('/api', apiRouter); server.use(express.static(__dirname + 'public')); server.listen(config.port, () => { console.log('Express is listening on port ' + config.port); }); I have tried searching everywhere for an answer, but haven't had any luck. Any feedback at all is very appreciated! Thank you!

Submitted April 28, 2017 at 09:37PM by judoka24