whilelucky / pwa Goto Github PK

An opinionated progressive web app boilerplate

License: MIT License

CSS 10.59% JavaScript 87.80% HTML 1.60%

react redux universal postcss webpack react-router route-chunking prpl preload testing process-manager pm2 editorconfig babel eslint jest pwa boilerplate html-streaming

pwa's Introduction

Progressive Web App

A production grade progressive web app, to hit the ground running.

Setup

$ npm install

ENV Variables

NODE_ENV (build-dependent)
- development: modules are bundled as is
- production: modules are minified and uglified
PWA_ENV (build-dependent)
- development: configs are obtained from /config/development.js
- production: configs are obtained from /config/production.js
- customPwaEnv: configs are obtained from /config/customPwaEnv.js
PWA_PUBLIC_PATH (build-dependent)
- /build/client/: assets are fetched from the local filesystem
- /production.cdn.com/build/client/: assets are fetched from this cdn path
- /custom/path/: assets are fetched from /custom/path/
PWA_SSR (build-independent)
- true: enable server side data fetching and rendering
- false: disable server side data fetching and rendering
PORT (build-independent)
- 8000: serve the app at port 8000
- 1337: serve the app at port 1337

build-dependent: if any of these variables values have to be changed, assuming you change PWA_PUBLIC_PATH=//other.cdn.com in the staging:build script, then it requires a rebuild and a restart, npm run staging

build-independent: if any of these variable values have to be changed, assuming you change PWA_SSR=false in the staging:start script, then it only requires a restart, npm run staging:start

Usage

There are some useful npm scripts setup for you to start using these ENV variables effectively, please look at package.json to better understand how they're setup for each script.

Remember to run npm stop to stop all the pwa pm2 instances before using a different script from below.

Start as local development server with file watching:

$ npm start
# runs at http://localhost:8000
# npm run stop is automatically called for you after
# hitting ctrl+c to quit the webpack-dev-server

Start as local production server:

$ npm run development
# runs at http://localhost:1337

Start as staging server:

$ npm run staging
# runs at http://localhost:1337

Start as production server:

$ npm run production
# runs at http://localhost:1337

Using pm2:

$ npm run pm2 -- logs # follow all server logs
$ npm run pm2 -- list # list all processes
$ npm run pm2 -- kill # kill pm2 parent process
$ npm run pm2 -- help # show other available commands

License

MIT

pwa's People

Contributors

Stargazers

Watchers

Forkers

perinikhil marufsiddiqui baljeet janicklas-ralph manjula-dube qqqzhch chardy ankeetmaini nilportugues kikoanis foio mastilver mrasoahaingo damianmcnulty cwonrails kovenliao knighthunter09 nampham-nt alkshendra veeracs vunguyentuan cyberlight fr34k8 athiwatp kucukharf rohan-buechner nicmitchell iuap-design astw ognjenjevremovic engineerchirag lionsrc ryanwild manishnakar vamgoon jawgrar axel-lanuza xiaoping6688 yu3ver brugos sumanbh wolfag 5l1v3r1 dinh0012 wjnbreu nirvanesque thoaihuynh2509 abanoubha 3atlisteri

pwa's Issues

Server-side rendering and async routing

Hi!

When I render a synchronous route on server-side and then the client side hydrate the dom, I get a warning because client side asynchronous route don't expect to find the component.

In other hand react fiber reconciliation tries to remove this non hydratable node. So the page makes a blank flash on client side :(

how is the Server worker working on http request, Can you please elaborate

Question: Does it work offline or the support is there?

The syntax of the command is incorrect.

Why I am getting this error :

Issue with common chunk plugin

Hi i am trying to modify the webpackclient.js file.

  entry: {
    main: './client/index.js',
    vendor: ['./client/vendor/js/index.js', './client/vendor/css/index.css'],
    modOne: './client/views/Chunk.js',
  }

In the entry i have added one more entry point modOne which contains chunk.js
chunk.js is contains present the view folder which imports these from the same view folder.

import Detail from './Detail/Detail';
import NotFoundPage from './NotFoundPage/NotFoundPage';

Changes i made in the route folder are

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import importCss from 'core/importCss';
import Wrapper from 'views/Wrapper/Wrapper';
import NotFoundPage from 'views/NotFoundPage/NotFoundPage';
import Detail from 'views/Detail/Detail';

export default (
  <Route path="/" component={Wrapper}>

    <Route
      name="landing"
      getComponent={(_, cb) => {
        Promise.all([
          import('views/LandingPage/LandingPage' /* webpackChunkName: 'landing' */),
          importCss('landing'),
        ]).then(([module]) => cb(null, module.default));
      }}
    />
    <IndexRoute name="modOne" component={Detail} />
    <Route name="modOne" path="*" component={NotFoundPage} />

  </Route>
);

Here is the common chunk configuration

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new CleanWebpackPlugin(['./build/client']),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': isProd ? '"production"' : '"development"',
      __BROWSER__: true,
      __PWA_ENV__: JSON.stringify(__PWA_ENV__),
      __LOCAL__: __PWA_ENV__ === 'local',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'webpackManifest'],
      minChunks: Infinity,
    }),
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'main',
    //   children: true,
    //   minChunks: 2,
    // }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'modOne',
      chunks: ['main', 'modOne'],
      minChunks: 2,
    }),

but the issue is that when i make a build and run the code on localhost:1377 i get a error in the console as -

webpackManifest.afbe5cc0.js:formatted:10 Uncaught TypeError: Cannot read property 'call' of undefined
    at n (webpackManifest.afbe5cc0.js:formatted:10)
    at Object.6rQ3 (main.bf018efd.js:1)
    at n (webpackManifest.afbe5cc0.js:formatted:10)
    at window.webpackJsonp (webpackManifest.afbe5cc0.js:formatted:26)
    at main.bf018efd.js:1

Please let me know what wrong i am doing with common chunk plugin.

Double import of `babel-polyfill`?

Hi! It seems you import babel-polyfill in https://github.com/lakshyaranganath/pwa/blob/master/client/vendor/js/index.js#L1, and again in https://github.com/lakshyaranganath/pwa/blob/master/client/index.js#L1, is there a reason for the same import twice?

R Router 4

Any chance of a react-router 4 update?

Thanks!!

Is it does server side rendering ?

npm install fails on Windows 10

$ npm install

> [email protected] install C:\www\NodeJS\React-Express\pwa\node_modules\integer
> node tools/install


C:\www\NodeJS\React-Express\pwa\node_modules\integer>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Program Files (x86)\Python36-32\python.exe", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.15063
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\www\NodeJS\React-Express\pwa\node_modules\integer
gyp ERR! node -v v8.9.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok

> [email protected] install C:\www\NodeJS\React-Express\pwa\node_modules\farmhash
> node-gyp rebuild


C:\www\NodeJS\React-Express\pwa\node_modules\farmhash>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Program Files (x86)\Python36-32\python.exe", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.15063
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\www\NodeJS\React-Express\pwa\node_modules\farmhash
gyp ERR! node -v v8.9.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok

> [email protected] install C:\www\NodeJS\React-Express\pwa\node_modules\pre-commit
> node install.js


> [email protected] postinstall C:\www\NodeJS\React-Express\pwa\node_modules\spawn-sync
> node postinstall


> [email protected] postinstall C:\www\NodeJS\React-Express\pwa\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js


> [email protected] postinstall C:\www\NodeJS\React-Express\pwa\node_modules\preact
> node -e "console.log('\u001b[35m\u001b[1mLove Preact? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/preact/donate\u001b[0m')"

Love Preact? You can now donate to our open collective:
 > https://opencollective.com/preact/donate
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\integer):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node tools/install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\farmhash):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

Python env variable exists and specify path to C:\Program Files (x86)\Python36-32\python.exe.
npm config set python 'C:\Program Files (x86)\Python36-32\python.exe' or npm install --python= 'C:\Program Files (x86)\Python36-32\python.exe' give the same result.

node v8.9.0
npm 5.5.1
$ python -V
Python 3.6.1