catamphetamine / webpack-react-redux-server-side-render-example Goto Github PK

View Code? Open in Web Editor NEW

250.0 250.0 39.0 2.76 MB

A sample React/Redux/Webpack project with Server-Side Rendering

CSS 29.56% JavaScript 70.44%

webpack-react-redux-server-side-render-example's Introduction

This sample project illustrates a React/Redux application with optional server-side rendering bundled with Webpack.

Features

React
Redux
Server-Side Rendering in production mode (optional feature)
Webpack 4
Development mode: hot reload for React components, hot reload for Redux reducers and actions
(optional) Code splitting

Quick Start

npm install

Development

Note: The development script currently doesn't seem to work on my Windows machine. It stalls for a long time and then throws an error:

[Error: EBUSY: resource busy or locked, lstat 'c:\DumpStack.log.tmp'] {
  errno: -4082,
  code: 'EBUSY',
  syscall: 'lstat',
  path: 'c:\\DumpStack.log.tmp'
}
ERROR: "development:client:build" exited with 1.
ERROR: "development" exited with 1.

npm run dev
wait for it to finish (it will say "Now go to http://127.0.0.1:3000" in the end)
go to http://localhost:3000
interact with the development version of the web application
Ctrl + C

Production

npm run production
wait for Webpack to finish the build (green stats will appear in the terminal, and it will print "Webpage rendering service is listening at port 3001" when the application has started)
go to http://localhost:3000
interact with the production version of the web application
check out ./build/bundle-stats.html and ./build/bundle-stats-2.html for detailed info on which modules take up the most space in the output bundle

How to see non-minified React errors during npm run production

Replace --mode production with --mode development in package.json in production:client:build script.

Summary

This application consists both of the "client side" and the "server side" (for illustration purposes).

The "client side" is the javascript code (./src/index.js) which is built by Webpack and run in a web browser, along with the "page rendering service" (./rendering-service) which does the same thing but in a Node.js process on the server providing "Server-Side Rendering" capability.

The "server side" consists of the "API" (./api) and the "proxy server" (./proxy-server).

The "proxy server" approach illustrated in this app is for illustration purposes only. It is considered old-fashioned now as all modern applications are becoming more distributed and decentralized running API in a cloud (e.g. Amazon Lambda) and serving "statics" from a whole another place (e.g. Amazon S3, configured via output.publicPath in webpack.config.js) in which case the React application queries the API server by an absolute URL (this is called "CORS") and no proxying is needed, therefore the whole "proxy server" is moved out of the equation.

In this example though, for simplicity, "proxy server" is used and it runs on port 3000 and routes all relative URL paths to their destinations:

"statics" ("static files", "assets") are served (in production mode only) on /assets URL path
/api is proxied to the "API server" (running on port 3002)
all the other URLs are proxied to the "page rendering service" (which runs on port 3001).

In development mode there's one more Node.js process running: webpack serve is running on port 3000 which serves the "assets" compiled by Webpack (live) via HTTP protocol. In production there's no webpack serve and Webpack just outputs those compiled assets to the ./build folder and the "proxy server" serves those "assets" from there. In a real production environment though this "hand made" sample proxy server would have been dropped in favour of a proper proxy like NginX or HAProxy.

webpack-react-redux-server-side-render-example's People

Stargazers

Watchers

webpack-react-redux-server-side-render-example's Issues

Make this example simpler by removing web-service

Hi,
thanks for the good work, I am trying to figure it out how universal redux work but I find it disturbing that this example is actually using a lot of libraries.

The more disturbing one is "web-service", this is another library you developed and this make this example very complicated to me (trying to integrate universal-webpack in my app that does not use web-service)

npm run dev fails

npm run dev

> [email protected] dev /home/uptown/Projects/webpack-react-redux-isomorphic-render-example
> npm-run-all development-prepare-server-build development


> [email protected] development-prepare-server-build /home/uptown/Projects/webpack-react-redux-isomorphic-render-example
> universal-webpack --settings ./webpack/universal-webpack-settings.js prepare

/usr/bin/env: ‘node\r’: No such file or directory

npm ERR! Linux 4.4.0-22-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run-script" "development-prepare-server-build"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] development-prepare-server-build: `universal-webpack --settings ./webpack/universal-webpack-settings.js prepare`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] development-prepare-server-build script 'universal-webpack --settings ./webpack/universal-webpack-settings.js prepare'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-react-redux-isomorphic-render-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     universal-webpack --settings ./webpack/universal-webpack-settings.js prepare
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs webpack-react-redux-isomorphic-render-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls webpack-react-redux-isomorphic-render-example
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/uptown/Projects/webpack-react-redux-isomorphic-render-example/npm-debug.log
ERROR: development-prepare-server-build: None-Zero Exit(1);

npm ERR! Linux 4.4.0-22-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `npm-run-all development-prepare-server-build development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'npm-run-all development-prepare-server-build development'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-react-redux-isomorphic-render-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm-run-all development-prepare-server-build development
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs webpack-react-redux-isomorphic-render-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls webpack-react-redux-isomorphic-render-example
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/uptown/Projects/webpack-react-redux-isomorphic-render-example/npm-debug.log

Is it works in production mode?

Hi! Can't get how it works in production. You have webpack in devDependencies, but /rendering-service/index.js requires webpack.config, which requires webpack. Do you use devDependency in production mode or I miss something in your implementation?

Inlining css in <style> tag for server rendered pages

Is there a way to inline css into the <style> tag on the server side?

I played around with the config and setting css_bundle to false, gets javascript to load the <style> tag on the client end. How do I make this happen on the server itself?

Still getting a warning on the server about PropTypes

Still getting a warning on the server:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Cannot import css files within node_modules

I'm not sure which package this bug report belongs to, and I'd be happy to file it under the correct package if you point me in the right direction.

Steps to reproduce.

git clone https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example.git
cd webpack-react-redux-isomorphic-render-example/
npm install
npm install sweetalert
edit client/src/pages/Home.js, and add "import swstyles from 'sweetalert/dist/sweetalert.css';"
npm run dev

upgrade webpack-dev-middleware from version 1.12.2 to v. 2.0.3: Error

If I upgrade webpack-dev-middleware from version 1.12.2 to v. 2.0.3, I get this error:

 > universal-webpack --settings ./webpack/universal-webpack-settings.json prepare

env: node\r: No such file or directory

Trying to resolve locales modules

Hi! First thanks for the hard work on universal app with react.
I'm currently trying to move from react-isomorphic-tools to universal-webpack.
In my webpack config, i added a modulesDirectories config with the client folder (code/client).
modulesDirectories: ['code/client', 'node_modules']

I expected to be able to require my module directly by doing something like:

import MyComponent from "components/MyComponent"

instead of (depending of the requiring file):

import MyComponent from "../../components/MyComponent"

It doest build for the client, but not for the page-server, throwing an error like:

Error: Cannot find module 'components'

I don't know how to resolve this issue.

Many thanks :)

Slow?

I just pulled this repo down and was wondering if it's normal for the GET of the user list to take so long? For me its taking about 1.5s which seems really long given the list is empty and in memory (no db). Doing a PUT for a user takes a similar amount of time - which when combined with the get to refresh causes a wait of around 3s.

Is this normal? And if so, where is the time being spent?

Question: how to support watch mode using nodemon?

I need a solution of using the universal-webpack plugin to start the server using nodemon or similar watch mode, it would be great if your sample supports this

SyntaxError: Block-scoped declarations

When I npm run dev I get a ton of errors like this:

/home/gb/tmp/webpack-react-redux-isomorphic-render-example/code/common/server entry.js:30
let folder = path.dirname(relative_path)
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (/home/gb/tmp/webpack-react-redux-isomorphic-render-example/code/api-server/entry.js:1:63)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)
[nodemon] app crashed - waiting for file changes before starting...

I'm a newb so I'm likely doing something wrong.

Can universal-webpack be used without react-website

Right now, i am converting my react application from webpack-isomorphic-tools to univeral-webpack. But example here shown with react-website. Can this be used without react-website?

Breaks with tree-shaking.

Amending babelrc to ["es2015", { "modules": false }] causes builds to fail immediately, complaining about unexpected token import in whatever file is the first to use it as it walks the chain.

Tried swapping out all imports/exports in all webpack config files to no avail. It just pushes the complaint back further and further.

User page fails to navigate except on refresh

Loading the home page and then clicking on users is blocked:

Failed to load http://localhost:3003/example/users: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.

It looks like the transform_url function in react-website mangles the /api/example/users into the raw api call port (why?).

I like the pattern of proxying /api to the private API server, which is also what the now deprecated react-redux-universal-hot-example project does, but it seems like you hard coded the comment for why you made the changes in 5 separate files ,, but unless i'm missing something, you could have simply added Access-Control-Allow-Origin: * to the api server to allow for cross-origin requests? I don't believe it's "Chrome" specifically disallowing this behavior it's part of the CORS standard.

I think it's also fine to proxy /api down into an internal API server in production, if you don't need to scale up a separate API. your comment implies you only made this change to work around the cors issue.

window._locale always seems to be undefined

I can't seem to get the locale-detection to work. The html lang attribute is always empty, and window.locale is undefined. Not sure how to proceed. Where should the options for koa be set? Is it in common/web server or in the react-isomorphic-render directory in ./node_modules?

Thanks!

no npm start?

can you alias npm run dev to npm start or something? It makes me feel uncomfortable.

Settings.preload.catch warning

I'm getting this warning when running the project with 'npm run dev':

settings.preload.catch has been moved to settings.catch. The older way is deprecated but still works in 10.x.x

Note when I add more components to the project (I am using it as a base) I am getting more instances of this warning.

No styling in development mode

When I access the app after running npm run dev no styling is loaded.

Styling does work when running as npm run production.

Am I missing something?

Configure compress-webpack-plugin?

Has anyone had success using compress-webpack-plugin to gzip code assets? I've been pleased with performance, but right now my bundle is at 600kb and I'd love to reduce that more but I've got almost no webpack experience.

How to import scss files?

Hey guys,
Thanks for your great work!

My example: import styles from './Footer.scss';
I added sass loader, but have following issue You may need an appropriate loader to handle this file type.

Add property to redux state

How can I store property childCallerObjectto redux state using that syntax?

export const addUser = redux.action (
	'ADD_USER',
	async ({ http }, user, childCallerObject) =>{
		await delay(1500)
		await http.post(`/api/example/users`, user)
	},{ result: 'users'}
)
const initialState = { users: [] }

I want to get child, from which I call that method and store it in redux. How is that possible with this syntax?

npm run dev error

Following your instructions, when get to npm run dev get following error:

configuration.web.port = process.env.PORT;

TypeError: Cannot set property 'port' of undefined
at Object. configuration.index.js

Built main.js is HUGE

I ran into my issue with tree shaking when trying to trouble-shoot this problem in my app. But since that broke, I just cloned the repo from scratch, ran yarn, then ran npm run dev, and main.js is just as massive. It's 3.54mb un-gzipped, which translates to roughly 1mb gzipped delivered to the browser. This is, roughly, 10 times larger than I'd expect it to be given my work on other, far more complex server-side rendered react applications. The built server.js file is a mere 82.3kb in comparison.

Can you please look into this problem? This sort of file size is so unacceptable that if a solution isn't found I'm going to have to migrate my entire app to another boilerplate.

Error: Couldn't find preset "stage-0" relative to directory

> [email protected] development:webserver e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example
> nodemon ./webserver/entry.js --watch ./webserver

(node:18936) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
[nodemon] 1.11.0
[nodemon] reading config e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\nodemon.json
[nodemon] to restart at any time, enter `rs`
[nodemon] ignoring: e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\.git/**/* .nyc_output .sass-cache bower_components coverage e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules/**/* e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\.git/**/* node_modules/**/*
[nodemon] watching: e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\webserver/**/*
[nodemon] watching extensions: js,json
[nodemon] starting `node ./webserver/entry.js`
[nodemon] child pid: 1204
[nodemon] watching 2 files


Error: Couldn't find preset "stage-0" relative to directory "e:\\Work\\Projects\\GitHub\\webpack-react-redux-isomorphic-render-example\\node_modules\\react-isomorphic-render"
    at e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at compile (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-register\lib\node.js:103:45)
    at loader (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-register\lib\node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (e:/Work/Projects/GitHub/webpack-react-redux-isomorphic-render-example/client/build/server/server.js:531:18)
    at __webpack_require__ (e:/Work/Projects/GitHub/webpack-react-redux-isomorphic-render-example/client/build/server/server.js:21:30)
From previous event:
    at server (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\universal-webpack\source\server.js:20:43)
    at Object.<anonymous> (e:/Work/Projects/GitHub/webpack-react-redux-isomorphic-render-example/client/rendering-service/start.js:7:1)
    at Module._compile (module.js:570:32)
    at loader (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (e:\Work\Projects\GitHub\webpack-react-redux-isomorphic-render-example\client\rendering-service\entry.js:22:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)

Web server is listening
Now go to http://localhost:3000
[nodemon] app crashed - waiting for file changes before starting...
Hash: a7c4a9c88a74397b53bf
Version: webpack 2.2.1
Time: 12510ms
                                    Asset     Size  Chunks                    Chunk Names
     9059f094ddb49c2b0fa6a254a6ebf2ad.jpg  40.2 kB          [emitted]
             main.a7c4a9c88a74397b53bf.js  3.44 MB       0  [emitted]  [big]  main
main-02755ea0d7a42f73bbff951d64336830.css  28.2 kB       0  [emitted]         main
webpack built a7c4a9c88a74397b53bf in 12510ms

After installing:
npm i babel-preset-stage-0 --S

it's showing:

Error: e:/Work/Projects/GitHub/webpack-react-redux-isomorphic-render-example/node_modules/renderkid/node_modules/utila/scripts/js/lib/utila.js: No element indexed by 5
at ArraySet_at [as at]

Page server doesn't find files

Hello,

Very nice stack, so complete, i am having some problems with the config, the page server at port 3002 is not finding the files, it throws 404 for all. Also i would like to ask for a little explanation if possible, I don't understand why there are two servers and how they work.

Using webpack.babel.js and enforcing import

Firstly, thanks for a great upgrade to your tools package! I appreciate what your old one was trying to do but it did feel a bit nasty to use but other workarounds seemed just as invasive so looking for alternatives when I found this package.

One of the biggest hurdle of this package is understanding how it is used it most practical applications. I've some suggestions to improve the implementation and examples. You should be able to support commonjs and es6 modules with webpack using webpack.babel.js format with babel-runtime and babel-loader installed will trigger the ES6 compiling. Its a not a well documented feature but very helpful. It would also be good to see a simple example without other builds tools like nodemon. Including code for these development tools isn't nice for a such a great package.

I'll link you to my fork once I've finished the changes I needed. If you could add an example within the repository without the other third-party dependencies it would really help me understand how you see this package being used at a simple level so I could help more in the future.

Proptypes Warning

Getting this warning when running the project with 'npm run dev':

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Environment variables set on webpack.config.client.development.js are not respected.

When I set an environment variable as in here: the values do not make it through. For example, if I add a new entry and then console.log it, I get undefined

css issue when importing material ui.

Hello Nikolay!
I'm using your ssr sample with react material ui. so I designed all with material ui.
On dev mode, all is fine.
But when I run the project with production mode, then layouts and material ui componets style are messed.

How can I resolve it?
Best regards!

Material UI version is v1.0.0.

Would React-hot-loader 3.0 be easy to upgrade to?

Hey Halt-hammerzeit,

Have you tried out react-hot-loader 3.0 yet? (I have not). Gaearon says it fixes a lot of the issues in the previous hot reloading libraries he had put together. It's still in a beta phase.

A few references:
gaearon/react-hot-loader#240
gaearon/react-hot-boilerplate#61

I may experiment with it myself if I have time, but I bet you would have a better idea how to do it. I honestly don't really understand how any of the hot reloading stuff works or is configured.

Does webpack serve pay attention to plugins?

In my webpack.config.js I have a plugin:

// Ignore certain kinds of development scratch files
new webpack.WatchIgnorePlugin([/^\.#.*/]),

However, while webpack --watch does not rebuild when these files change, webpack-serve always rebuilds.

webpack-serve also seems to disregard stats part of the config, blobbing large amounts of text into the console when using mini-css-extract-plugin as part of a universal-webpack build system.

Doesn't run webserver in Windows 10

I've confirmed on two separate Win10 machines now: the web server running at port 3000 never starts. This is the last output when running it:

Webpage rendering service is listening at port 3002
Hash: b9d58501467e3f9c9804
Version: webpack 2.2.1
Time: 5616ms
                                    Asset     Size  Chunks                    Chunk Names
     9059f094ddb49c2b0fa6a254a6ebf2ad.jpg  40.2 kB          [emitted]
             main.b9d58501467e3f9c9804.js  3.46 MB       0  [emitted]  [big]  main
main-4d7696adb13def249944e727c3796f4b.css  28.2 kB       0  [emitted]         main
webpack built b9d58501467e3f9c9804 in 5616ms

After this there is no output. I've left it for up to 30 minutes, and nothing else happens. Obviously nothing is ever run on localhost:3000 either.

is it possible to activate breakpoints using the debugger statement?

i'm trying to get familiar with as much as i can, figured this might be useful. Had to change the source-map setting though to even get to see the source and correct line numbers. Setting breakpoints in a debugging tool works, but the debugger statement is dropped.

Missed babel-plugin-transform-runtime in package.json

Npm run start failed because of no found this plugin which is specified in the outer .babelrc

require('babel-register') should ignore build/server.js

For my large project, I am making babel-register ignore the build folder in 'common/server entry.js' like this:

require('babel-register')({
  ignore: /.*(build|node_modules)\/.*/,
});

This speeds up the start time of my server a ton. Since you are already using webpack to babelify that code, I think you can ignore it in the babel-require. Does that make sense?

ReactDOM not defined when setting development_tools to true

I'm getting "ReactDOM is not defined" when I try to set the development_tools option to true in application.js.

Not sure how to solve this.

wrong conf in package.json ?

Is it right using server conf for client build here
https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example/blob/master/package.json#L76

Uncaught Error: imports[1] for react-transform-catch-errors does not look like a React component.

When running npm run dev and loading the example project in my browser at http://localhost:3000/ I'm getting an error in my console:

(index.js:67) Uncaught Error: imports[1] for react-transform-catch-errors does not look like a React component.

However, running npm run production indeed works normally without errors. Could you please advise me how I can fix this? The error is thrown from within node_modules/react-transform-catch-errors but I'm not doing a very good job following the call stack to find the root cause of the problem in the example app.

Thank you so much!