mildanor / js-react-starting-kit

Starting a project with Hugo, React, Redux, Webpack, Babel and SASS

js-react-starting-kit

Starting a project with Hugo, React, Redux, Webpack, Babel and SASS

• Hugo is a Go general-purpose website framework that works as a static site generator.
• React is a JavaScript library providing a view for data rendered as HTML.
• Redux Redux is a predictable state container for JavaScript apps.
• Webpack is a JavaScript module bundler that generates static assets representing your module dependencies.
• Babel Babel is a Javascript ECMAScript 6 to ECMAScript 5 compiler.
• SASS is a scripting language that is interpreted into CSS

Is a crazy idea to join Hugo and Webpack? Lets see..

Install

You should already have hugo installed in your machine;
You need also npm installed ; then...

npm install -g webpack-dev-server #for development purposes
npm install -g webpack
npm install

Build it:

npm run build

Development server:

At this point, things are different if you are focused in Hugo, or in Webpack:

• hugo server will serve its stuff from /public folder, so everything should be there: js bundles too
• webpack-dev-server, will serve the bundles from memory, so no data is writen into /public

Accessing the site through hugo:

Using hugo server, there will be live reload when hugo files changes;
You should build the bundles using webpack -w (because using webpack-dev-server bundles are served from memory)

npm run hugo-server
npm run webpack-watcher

visit: http://localhost:8181

Accessing the site through webpack:

using webpack-dev-server there will be live reload when webpack bundles changes;

npm run hugo-server
npm run webpack-server

visit: http://localhost:8282 or http://localhost:8282/webpack-dev-server/