[FEATURE] webpack.config.js for server-side rendering
CDRO opened this issue · 2 comments
Hello!
First of all, I'd like to thank you for this awesome work! This really got us kickstarted quite well and we'll be able to work with this as a solid base for our React projects! It's awesome!
Still, I found one major concern with the current state of the project and it's mainly SEO.
So, with webpack it is possible to render the HTML staticaly (https://github.com/webpack/react-webpack-server-side-example) but I haven't figured out how to configure my relay-fullstack instance to do that, at all.
Here's my webpack.config.js, maybe you can tell me what is wrong or maybe suggest a way to do it properly?
Regards
Tizian
webpack.config.js:
'use strict';
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
let appEntry;
let devtool;
let plugins;
if (process.env.NODE_ENV === 'production') {
appEntry = [path.join(__dirname, 'client/index.js')];
devtool = 'source-map';
plugins = [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true
}
}),
new HtmlWebpackPlugin({
title: 'Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS',
template: './client/index.html',
mobile: true,
inject: false
}),
new FaviconsWebpackPlugin('./client/assets/logo.png')
];
} else {
appEntry = [
path.join(__dirname, 'client/index.js'),
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server'
];
devtool = 'eval';
plugins = [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
__DEV__: true
}),
new HtmlWebpackPlugin({
title: 'Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS',
template: './client/index.html',
mobile: true,
inject: false
}),
new FaviconsWebpackPlugin('./client/assets/logo.png')
];
}
var commonLoaders = [
{ test: /\.js$/, loader: 'babel-loader', },
{ test: /\.png$/, loader: "url-loader" },
{ test: /\.jpg$/, loader: "file-loader" },
];
var assetsPath = path.join(__dirname, "public", "assets");
var publicPath = "assets/";
module.exports = [
{
// The configuration for the server-side rendering
name: "server-side rendering",
entry: "./server/page.js",
target: "node",
output: {
path: assetsPath,
filename: "../../server/page.generated.js",
publicPath: publicPath,
libraryTarget: "commonjs2"
},
resolve: {
extensions: ['', '.jsx', '.js']
},
externals: /^[a-z\-0-9]+$/,
module: {
loaders:[
{ test: /\.jsx?$/, loader: "babel-loader", query: { presets: ['react', 'es2015'] } },
{ test: /\.jpe?g$|\.png$|\.gif$/, loader: "file-loader" }
]
}
}
];
/*
module.exports = {
entry: {
app: appEntry,
vendor: ['react', 'react-dom', 'react-mdl', 'react-relay', 'react-router', 'react-router-relay']
},
output: {
path: path.join(__dirname, 'build'),
publicPath: '/',
filename: '[name].js'
},
devtool,
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
loaders: ['style', 'css']
}, {
test: /\.scss$/,
loaders: [
'style',
'css?modules&importLoaders=1' +
'&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
]
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)(\?\S*)?$/,
loader: 'url-loader?limit=10000&name=assets/[hash].[ext]'
//loader: 'file'
}
//,{test: /test woff/, loader}
]
},
postcss: () => [precss, autoprefixer],
plugins
};
*/
Hi Tizian, Thanks for the question. I have planned to integrate server-side rendering for a long time. Unfortunately, I don't have time to do it very soon. Relay doesn't support server-side rendering out of the box. You might need to take a look at isomorphic-relay-router. A PR would be also very welcomed
The Relay 2 (release date supposedly soon but not yet confirmed) approach to SSR might be of interest here:
"Our overall approach with the new core has been to build simple primitives that can be built upon in user space. So for example, there is a clear separation of the React integration layer and the core - the former being implemented entirely via the public API of the latter. It might take a few releases to refine and document this, but i expect that it will be easy for the community to build upon this to make a server rendering module for Relay." source: facebook/relay#1369