Menu
My server.js file is written in node and looks like this:
var path = require('path');
var express = require('express');
var app = express();
var PORT = process.env.PORT || 8080
// using webpack-dev-server and middleware in development environment
if(process.env.NODE_ENV !== 'production') {
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var webpack = require('webpack');
var config = require('./webpack.config');
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));
}
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(request, response) {
response.sendFile(__dirname + '/dist/index.html')
});
app.listen(PORT, function(error) {
if (error) {
console.error(error);
} else {
console.info("Listening on port %s", PORT);
}
});
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>what ever</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id='root'/>
</body>
<script src="/bundle.js"></script>
</html>
My index.js file which includes my react router code looks like this:
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory, hashHistory } from 'react-router';
/*----------- STYLESHEETS -----------*/
require('./assets/stylesheets/base.scss');
let history = process.env.NODE_ENV === "production" ? browserHistory : hashHistory;
/*----------- ROUTE COMPONENTS -----------*/
import Home from './components/home';
import Company from './components/company';
import Features from './components/features';
import Help from './components/help';
import SignUp from './components/signup';
import Work from './components/work';
render((
<Router history={history}>
{/** ###### HOME ROUTE ###### */}
<Route path="/" component={Home} />
<Route path="/company" component={Company} />
<Route path="/help" component={Help} />
<Route path="/features" component={Features} />
<Route path="/signup" component={SignUp} />
<Route path="/work" component={Work} />
{/** ###### END HOME ROUTES ###### */}
</Router>
), document.getElementById('root'));
I am using webpack to build and include assets like sass and images. I was able to use this tutorial to render a single page via the server, but it appeared with no css and images and it also appears to completely change the flow of the app in a way that doesn't seem good. Any examples of light weight simple apps not using 800000 different libraries that render on the server?
864
The main problem is Node doesn't know how to handle requiring your non js / json assets.
One solution supported out of the box by Webpack is to use target: 'node' and output.libraryTarget: commonjs2 which will generate a bundle ready to be required in Node.
You'll also want to look at the ExtractTextPlugin to extract your CSS into a separate file, otherwise html will render un-styled until the JS has downloaded.
It get's a little more complicated when using React Router but there's some good documentation here - https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
