CODEWITHSUNDEEP
javascriptnode.jsreactjswebpack
KVK
KVK

Reputation: 67

bundle.js created by webpack is not getting loaded when used with node server

I'm newbie to Reactjs and webpack. I'm trying to do a sample app using Node and React. I have chosen Webpack as module bundler. This is my project structue 

Project  
|--index.html  
|--package.json  
|--server.js  
|--webpack.config.js  
|--app/main.js    
|--app/routes.js    
|--app/components/login.js

webpack.config.js 

module.exports = {
    entry: "./app/main.js",
    output: {
        sourceMapFilename: "build/bundle.js.map",
        filename: "build/bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        }, {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, {
            test: /\.png$/,
            loader: "url-loader?limit=100000"
        }]
    }
}

index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>New Eden Faces</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900"/>
</head>
<body>
<div id="app">{{ html|safe }}</div>
<script type="text/javascript" src="build/bundle.js"></script>
</body>
</html>

In my server.js, I added a middleware 

app.use(function(req, res) {
    Router.match({ routes: routes.default, location: req.url }, function(err, redirectLocation, renderProps) {
        if (err) {
            res.status(500).send(err.message)
        } else if (redirectLocation) {
            res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
            var html = ReactDOM.renderToString(React.createElement(Router.RoutingContext, renderProps));
            var page = swig.renderFile("./index.html", {html:html});
            res.status(200).send(page);
        } else {
            res.status(404).send('Page Not Found')
        }
    });
});

Webpack generates build/build.js under my root directory(parallel to server.js and index.html)
When I run my node server and try to get http://localhost:3007/login, based on the routes configured in routes.js, my Login component gets rendered.
Here is my project/app/components/login.js 

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'react-bootstrap';
class Login extends React.Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-sm-5">
                        <strong>Username</strong>
                    </div>
                    <div className="col-sm-5 form-control">
                        <input type='text' className='form-control'/>
                    </div>
                    <Button bsSize="large">Hi</Button>
                </div>

            </div>
        )
    }
}

export default Login;

Here is the image snapshot of my output.

It is not loading my bundle.js why?

I can see that it got generated in my project under build directory. And why is not loading any css? Even though I used Button from react-bootstrap? why are css classes not getting applied. Webpack is supposed to bundle are dependent css files as well right?

Been stuck on this from few days but din't find anything. Any help would be really great. I hope I'm clear and thanks in advance.

Upvotes: 1

Views: 5406

Answers (1)

Kendrick Wong
Kendrick Wong

Reputation: 404

Your node.js application needs to be instructed to serve the static assets. (i.e. the javascripts under the build directory). For example:

const express = require('express');
const path = require('path');

const staticAssetsPath = path.resolve(__dirname, 'build');
app.use(express.static(staticAssetsPath));

Upvotes: 1

Related Questions