Open
Description
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
};
*/