lmammino / judo-heroes-2

Universal Javascript sample application with React Router 4 and Express 5 (Enhanced version of https://github.com/lmammino/judo-heroes)

judo-heroes-2

Universal JavaScript sample application with React Router 4 and Express 5 (Enhanced version of https://github.com/lmammino/judo-heroes)

Setup

git clone [email protected]:lmammino/judo-heroes-2.git
cd judo-heroes-2
yarn # or `npm i` if not using yarn

Available commands

Available commands to run with npm run:

• start: build the production package and run the production server (no universal)
• start:universal: build the production package and run the production server with universal rendering
• start:dev: build the dev package and run the server in dev mode (no universal rendering — auto-restarts on changes)
• start:dev:universal: build the dev package and run the server in dev mode with universal rendering (auto-restarts on changes)
• build: build the production package
• build:dev: build the dev package
• build:dev:watch: build the dev package in watch mode (listen for changes and re-build immediately)

Want to know more about Node.js, React and Universal JavaScript?

If you want to know more about Universal JavaScript and improve your application even more (e.g. by adding Universal Data Retrival using REST APIs) I definitely recommend to read the chapter Universal JavaScript for Web Applications on my book Node.js Design Patterns Second Edition (Packt):

Contributing

Everyone is very welcome to contribute to this project. You can contribute just by submitting bugs or suggesting improvements by opening an issue or by sending a pull request.

License

Licensed under MIT License. © Luciano Mammino.

judo-heroes-2's Issues

Explain build and run script decisions?

Hi Luciano!

Could you elaborate on why you choose what you did for the build and run scripts?

"scripts": {
"start": "npm run build && babel-node src/server.js",
"start:dev": "export NODE_ENV=development && npm run build:dev && nodemon --exec babel-node -- src/server.js",
"start:universal": "export UNIVERSAL=true && npm run start",
"start:dev:universal": "export NODE_ENV=development && export UNIVERSAL=true && npm run start:dev",
"build": "NODE_ENV=production webpack -p",
"build:dev": "webpack -d",
"build:dev:watch": "webpack -d --watch"
}

In particular, why did you drop HMR / webpack dev server in judo-heroes-2 versus judo-heroes?

Thanks,
Anthony

How do I host this on a server? I can't find the index.html after running build.

The build commands don't create a build directory with an index.html. I'm stuck. I was wondering if the static folder was the build folder. It has the bundle.js file, but i don't see any html files? Can anyone shed some light on this?

How we can setup code-splitting with this project

Hi Mammino,

We are using your repository for one of our project and we setup all the things easily with that. But we are not getting that how we can setup code-splitting or PRPL with your project.

We are trying following thing at routes but not able to load.

`

  <Route path="/" 
    getComponent={(location, callback) => {
      require.ensure([], require => {
        callback(null, require('./IndexPage').default)
      }, 'IndexPage')
    }} />

`

So can you please help us on that.

Thanks,
Manish

'export' is not recognized

I see no updates in last 3 years. Is this an abandoned project, no longer applicable to today's React and Node?
I have installed your code and run yarn install which appeared to complete correctly.
However when I run "yarn start:dev" I get the following error:

yarn run v1.15.2 $ export NODE_ENV=development && nodemon src/server.js 'export' is not recognized as an internal or external command, operable program or batch file. error Command failed with exit code 1.

It appears that the "export" command is not recognized ?
Is there something missing from the instructions/blog post/README

Will you be updating this project to more current versions of Node (12) React (16) Babel etc?

backend ajax calls and mongoosejs

Im confused on how all of this plays out with the backend(mongoosejs/mongodb). Is the routing not done by express anymore? Is all the routing completely done by react-router? I am trying to find examples on hooking the database.

How could we add HMR to this project?

I realize nodemon is used to conveniently rebuild after code changes, but then of course we still have to manually refresh the page. Do we have any plan to emulate HMR? I'd be happy to look into it as well, but honestly I am not well versed Webpack 2/3. Thanks for the demo!

import path from 'path';

import path from 'path';
SyntaxError: Unexpected token import

WebPack Compiler with Third Party APIs like Mapbox

I have trouble using sass-loader and using third party APIs when I try to run the Node server. Though I have made some modifications in your code-base, like adding Webpack compiler and Webpack-Dev-Middleware to the Express, but during the start of Node Express Server, the Webpack -d runs fine (i.e. Build is successfull), but the Server doesn't start.

It gives me following error:

• First when Scss files are imported to React Components, I get Syntax error for @import in any .scss files.
• To handle this, I removed Sass Imports (Just to check if it works without Sass compilation), but after that, I got following error:

mapbox-gl.js:404
"use strict";module.exports=self;
                            ^

ReferenceError: self is not defined

where mapbox-gl is a third-party library, and I import them in the Components, using the following plugin in webpack.conf:

new webpack.ProvidePlugin({
    mapboxgl: 'mapbox-gl',
    turf: "@turf/turf"
  }),

My Webpack conf is right, as it works, when I start it with webpack-dev-server.... Problem is when I try to use the same settings for creating a Universal React App.

I know this is not an issue, but was hoping that you might help me here someway, as I have searched a lot and tried a lot of ways to make it work, but none of them came out true.

Thanks

Should not be using `babel-node` for "production" use

I just came across this repo looking for universal React app examples and noticed your "production" mode server is using babel-node which says in the docs is not meant for production use.
Maybe just switch to babelifying the server code and running that in regular node?
https://babeljs.io/docs/usage/cli/#babel-node

The page is not updated after making changes to a component

Hi,
I start the server with command npm run:start:dev.
Every time I alter the code of any component I can see in terminal:

[nodemon] restarting due to changes...
[nodemon] starting `babel-node src/server.js`

      Server running on http://localhost:3000 [development]
      Universal rendering: disabled

However, the actual page http://localhost:3000 remains unchanged. When I refresh it manually I see no changes I've made before so I have to do CMD+C to stop the server and then npm run:start:dev again.

Is there any way to setup automatic rebuild?

sh: 1: webpack: not found

Hi!

I've followed along your tutorial. Everything works on the local machine. But deploying to heroku doesn't work in my case. It seems webpack is not installed.

How did you install webpack your heroku dyno?

Kind regards