atyantik / react-pwa Goto Github PK

An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

Home Page: https://www.reactpwa.com

License: MIT License

JavaScript 1.78% TypeScript 98.22%

pwa react ssr hot-reload code-splitting seo babel srcset expressjs javascript

react-pwa's People

Contributors

Stargazers

Watchers

Forkers

krunalg nilportugues vishalgheravada atapatel parksangkil rubythonode jayrajsinh ihsansatriawan derickwarshaw manojktechie opencollective bitstreaminnovations nicholas-b-carter mangowi yut148 kyle-cameron-zz jeisc mehrdad-shokri ankushranka intfrr bwhitty toujenicherif snowflowers imam-san mrasoahaingo levinhphuc91 kathgironpe kaptaanbarbosa zanjs namityadav guitarbeard suplum marufsiddiqui androidfanatic triyanarief mniinio cashwanikumar duyquoc anishmprasad narensprinter ankushtiwari-atyantik geraldsamosir vidhema nitinreddy3 rizwanzaheer djkwagala mrgoogol balamurugan-subbaian lukaszzdanikowski phinome abidra coder2000 suraj-26p wicool vegasvikk arlando rperrote prashantsharma athiwatp gunjankanungo akaqlonist skadapure mrbrownser freizeitler huokedu surendra20 thunderboltengineer radufarcas10 marclar zakyke vikaskyadav bitcraftin dugjohnson kamaldlk agilebelma harakeke-2018 akshay72222 endhilicious st-fresh wagnlinzh fecori kyle-yu skarpyak sandeepincode lionsrc diegolameira developdaly hansanwok gabrielmirandat gusdewa pronitdas kobars marvisamps liamchapman olandachocobear null-none zaletskyi kitchenyourcode anujvverma robertomalatesta

react-pwa's Issues

Include CSS from node_modules

I am trying to include a CSS file from node_modules, specifically at:

semantic-ui-css/semantic.min.css

How would you properly import this? Currently, I am adding

@import "~semantic-ui-css/semantic.min.css";

to the top of styles.scss. It starts normally, but gives the error below when the page is loaded.

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.12, but postcss-partial-import uses 5.2.17. Perhaps this is the source of the error below.
ERROR in ./node_modules/css-loader?{"modules":true,"localIdentName":"[local]","sourceMap":true,"minimize":false,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true,"sourceMapContents":true}!./src/resources/css/style.scss
Module build failed: Error: Failed to find '~semantic-ui-css/semantic.min.css'
in [
/home/coldwhistle/dev/react-pwa/src/resources/css
]
at /home/coldwhistle/dev/react-pwa/node_modules/postcss-import/lib/resolve-id.js:48:11
at
@ ./src/resources/css/style.scss 4:14-209 18:2-22:4 19:20-215

Strange behavior in prod and dev env (duplicate head)

Thank you for this awesome boilerplate.

I have a strange behavior with css.

In dev mode, all css are loaded.
In production, the head (metas + css) document of page is duplicated.
You can see an example in the attachement file (duplication of metas) :

Thank you

yarn run v1.2.1
node v8.7.0
After repository clone and yarn install && yarn start i get:
ERROR in ./src/resources/images/mario-large.png?sizes=100w+200w+400w+800w&placeholder&lightweight
esourcesimagesmario-large.png' in 'C:\sandbox\workspace\react-pwa\src\resources\images'
@ ./src/resources/images/mario-large.png?sizes=100w+200w+400w+800w&placeholder&lightweight 12:17-199 24:17-199
@ ./src/app/components/progressive-image/progressive-image.js
@ ./src/pages/progressive-image-rendering.js
@ ./src/routes.js
@ ./src/core/client/dev.client.js
@ multi babel-polyfill react-hot-loader/patch ./src/core/client/dev.client.js webpack-hot-middleware/client?name=common-client&path=/__hmr_update&timeout=2000&overlay=true

ERROR in ./src/resources/images/mario-large.png?sizes=100w+200w+400w+800w&placeholder
esourcesimagesmario-large.png' in 'C:\sandbox\workspace\react-pwa\src\resources\images'
@ ./src/resources/images/mario-large.png?sizes=100w+200w+400w+800w&placeholder 12:17-200 24:17-200
@ ./src/app/components/home/home.js
@ ./src/pages/home.js
@ ./src/routes.js
@ ./src/core/client/dev.client.js
@ multi babel-polyfill react-hot-loader/patch ./src/core/client/dev.client.js webpack-hot-middleware/client?name=common-client&path=/__hmr_update&timeout=2000&overlay=true

If images with same name are in different folders, the first one that gets build gets picked for display.

If images with same name is placed in common resources and one in a individual module the common one get picked even though the image path used was for the individual module while importing.

SSR Content Doesn't Match Content on Client

To Reproduce:

Load page with javascript disabled
In a new tab load page completely with Javascript

The pages are different. On the first page, there's a paragraph and the image missing.

Sort of related, there's been changes to SSR in React 16. I don't know how much of that you've implemented already.

This could also be affecting performance (I got 95% on lighthouse) as it needs to rerender the server's markup.

Page Transition Animations

Find a lightweight way to implement simple page transitions like a fade

CSP Support

I'm a strong advocate of CSP. I think it'd a great idea to implement it.

how to use graphql with this like apolloclient

Does this support dynamic SEO tags?

Want to generate dynamic SEO tags from an API is that possible?

Dockerizing the application

Using docker in order to deploy and easily scale the application is a necessary milestone. I believe you guys already have this as a WIP and if you were to share the progress, more people would be able to contribute.

Progressive Image loading

I think this would be a useful feature if implemented correctly.

See: https://jmperezperez.com/medium-image-progressive-loading-placeholder/
https://medium.com/@evenchange4/reproducing-medium-style-progressive-image-loading-for-react-2e83bba0c608

Redux Offline instead of API caching

Here’s an interesting article on this: https://hackernoon.com/introducing-redux-offline-offline-first-architecture-for-progressive-web-applications-and-react-68c5167ecfe0

Note: the repo for react offline is going through ownership changes currently

Support for immutable js

Replace postcss-smart-import

The postcss-smart-import is now deprecated not maintained anymore. A note in the repo advice to switch to postcss-import

ReferenceError: navigator is not defined

ReferenceError: navigator is not defined
at Object.defineProperty.value (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:4132995)
at t (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:163)
at Object.defineProperty.value (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:4120092)
at t (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:163)
at Object.defineProperty.value (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:4116217)
at t (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:163)
at Object.defineProperty.value (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:4109007)
at t (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:163)
at Object.defineProperty.value (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:4108559)
at t (C:\Users\thesa\Documents\ia-jn\dist\server.js:1:163)

Link to contributor graph broken in master/README.md

Mobx instead redux

Hello, and thank you for this awesome boilerplate.

Is this possible to exchange redux state management for Mobx?
If yes, how i can do it?

building app the app is not working out of the box

I am running into issues where building the app with yarn build returns errors like this

ERROR in ../core/node_modules/css-loader?{"modules":true,"localIdentName":"[name][local][hash:base64:5]","sourceMap":false,"minimize":true,"importLoaders":2}!../core/node_modules/postcss-loader/lib?{"sourceMap":false,"path":"C://Users//thesa//Documents//react-pwa//core//node_modules"}!../core/node_modules/sass-loader/lib/loader.js?{"outputStyle":"compressed","sourceMap":false,"sourceMapContents":false}!./app/components/about/about.scss
Module build failed: BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
at error (C:\Users\thesa\Documents\react-pwa\core\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:37:11)
at C:\Users\thesa\Documents\react-pwa\core\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:222:9
at Array.forEach ()
at browserslist (C:\Users\thesa\Documents\react-pwa\core\node_modules\postcss-merge-rules\node_modules\browserslist\index.js:196:13)
at cleanBrowsersList (C:\Users\thesa\Documents\react-pwa\core\node_modules\postcss-merge-rules\node_modules\caniuse-api\dist\utils.js:56:59)
at setBrowserScope (C:\Users\thesa\Documents\react-pwa\core\node_modules\postcss-merge-rules\node_modules\caniuse-api\dist\index.js:29:43)
at Object. (C:\Users\thesa\Documents\react-pwa\core\node_modules\postcss-merge-rules\node_modules\caniuse-api\dist\index.js:91:1)
at Module._compile (module.js:635:30)
at Module._extensions..js (module.js:646:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\thesa\Documents\react-pwa\core\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (C:\Users\thesa\Documents\react-pwa\core\node_modules\postcss-merge-rules\dist\lib\ensureCompatibility.js:7:19)
at Module._compile (module.js:635:30)
at Module._extensions..js (module.js:646:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\thesa\Documents\react-pwa\core\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (C:\Users\thesa\Documents\react-pwa\core\node_modules\postcss-merge-rules\dist\index.js:21:28)
at Module._compile (module.js:635:30)
at Module._extensions..js (module.js:646:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\thesa\Documents\react-pwa\core\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
@ ./app/components/about/about.scss 4:14-233
@ ./app/components/about/about.js
@ ./pages/about.js

App doesn't start on windows machine with error (Cannot find module '../build/Release/sharp.node')

After successful commands:
cd react-pwa && yarn install
yarn global add windows-build-tools
yarn global add node-gyp

I got the error after this:
yarn start

....

ERROR in ./src/resources/images/mario-large.png?sizes=100w+200w+400w+800w&placeholder
Module build failed: Error: Cannot find module '../build/Release/sharp.node'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (C:\Users\Artem\git\up\react-pwa\node_modules\sharp\lib\constructor.js:9:15)
at Module._compile (module.js:635:30)
at Module._extensions..js (module.js:646:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\Artem\git\up\react-pwa\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
@ ./src/app/components/home/home.js 22:18-108
@ ./src/pages/home.js
@ ./src/routes.js
@ ./src/core/client/dev.client.js
@ multi babel-polyfill react-hot-loader/patch ./src/core/client/dev.client.js webpack-hot-middleware/client?name=common-client&path=/__hmr_update&timeout=2000&overlay=true

The command:

node-gyp rebuild

gives me next result:

gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp info spawn C:\Python27\python.EXE
gyp info spawn args [ 'C:\Users\Artem\AppData\Local\Yarn\config\global\node_modules\node-gyp\gyp\gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'msvs',
gyp info spawn args '-G',
gyp info spawn args 'msvs_version=auto',
gyp info spawn args '-I',
gyp info spawn args 'C:\Users\Artem\git\up\react-pwa\build\config.gypi',
gyp info spawn args '-I',
gyp info spawn args 'C:\Users\Artem\AppData\Local\Yarn\config\global\node_modules\node-gyp\addon.gypi',
gyp info spawn args '-I',
gyp info spawn args 'C:\Users\Artem\.node-gyp\8.9.1\include\node\common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=C:\Users\Artem\.node-gyp\8.9.1',
gyp info spawn args '-Dnode_gyp_dir=C:\Users\Artem\AppData\Local\Yarn\config\global\node_modules\node-gyp',
gyp info spawn args '-Dnode_lib_file=C:\Users\Artem\.node-gyp\8.9.1\<(target_arch)\node.lib',
gyp info spawn args '-Dmodule_root_dir=C:\Users\Artem\git\up\react-pwa',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'C:\Users\Artem\git\up\react-pwa\build',
gyp info spawn args '-Goutput_dir=.' ]
gyp: binding.gyp not found (cwd: C:\Users\Artem\git\up\react-pwa) while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (C:\Users\Artem\AppData\Local\Yarn\config\global\node_modules\node-gyp\lib\configure.js:336:16)
gyp ERR! stack at emitTwo (events.js:126:13)
gyp ERR! stack at ChildProcess.emit (events.js:214:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Windows_NT 10.0.14393
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Artem\AppData\Local\Yarn\config\global\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\Artem\git\up\react-pwa
gyp ERR! node -v v8.9.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok

Server state, client state and component state of redux? How does it work?

Reviewing the project I can see 3 definitions of the state of redux.. I assign different initialState in the 3 places and deploy the app:

for few secons i can see a server initial state
then the state changes for the client version of initial state
I never see the initial state of the component

How does it work?

I need it to work offline. That the user can add the app to his home and when he opens the app he sees his state cached and that it is validated with the one he has in the server and is updated on both sides. (merge status)

PD: Sorry for my bad english translate with google :P

Best regards, Rodrigo Perrote.

HSTS Support

I think HSTS headers should be added by deafult when using now. They should be opt in (in production mode) otherwise.

Failure to Compile on `npm start`

Running npm start throws several failure to compile errors. Accessing localhost:3003 shows blank page with the title "Common Title".

npm_start.log

Node: 9.2.1
NPM: 5.60
Ubuntu 16.04

Issue with imagemin-mozjpeg

forgot the link that says its better to use imagemin-jpegtran instead.

on Mac, node v8.9.3

[email protected] postinstall /Users/jaysondaquer/work/repos/github/react-pwa/node_modules/mozjpeg
node lib/install.js

⚠ The /Users/jaysondaquer/work/repos/github/react-pwa/node_modules/mozjpeg/vendor/cjpeg binary doesn't seem to work correctly
⚠ mozjpeg pre-build test failed
ℹ compiling from source
✖ Error: autoreconf -fiv && ./configure --disable-shared --prefix="/Users/jaysondaquer/work/repos/github/react-pwa/node_modules/mozjpeg/vendor" --bindir="/Users/jaysondaquer/work/repos/github/react-pwa/node_modules/mozjpeg/vendor" --libdir="/Users/jaysondaquer/work/repos/github/react-pwa/node_modules/mozjpeg/vendor" && make --jobs=8 && make install --jobs=8
Command failed: autoreconf -fiv
/bin/sh: autoreconf: command not found

at ChildProcess.exithandler (child_process.js:275:12)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Socket.stream.socket.on (internal/child_process.js:346:11)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at Pipe._handle.close [as _onclose] (net.js:554:12)

Need working sample action/reducer from within /src/app/component

Hi, I am working with this boilerplate and struggling to get an action/reducer working for a userProfile component. The best I can get so far is setting my initial state with default data. These defaults are persisting after the actions complete. When executing the action (includes an api call to get the real userProfile data) I can see the data response and see it pass through my reducer and the lodash assign but it is not replacing the initial state when state is connected in a separate component.

I would like to see a basic working sample inside of a /src/app/component/ that works with the global state. The only action/reducer that appears to be part of react-pwa is in the fileset as /core/src/app/component/screen.

Thanks,

Steven

doesn't have pwa on subroutes

when i hit the refresh button the app brokes

since core update i can't add new packages or npm start

the code will run up untill i add a new node package
module.js:538
throw err;
^

Error: Cannot find module '../../directories'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (C:/Users/thesa/Documents/ia-jn/core/webpack/dev.babel.js:26:1)
at Module._compile (module.js:635:30)
at loader (C:\Users\thesa\Documents\ia-jn\core\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\thesa\Documents\ia-jn\core\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)

module.js:538
throw err;
^

Either way there's an issue

Error 500 before loading home page

Hi, we're trying to test this out on our server and we're able to deploy and run it properly. The only issue we have now is it always shows the Error 500 page before loading the actual landing page. https://react-pwa-dev.istackmanila.com/about

Doesn't seems to work as PWA on iPhone

I tried the website on my iPhone, didn't get the notification to add on home screen, and also if I save it on my home screen manually, and open it, it opens as a website, on safari, not full screen or any thing pwa :/

routes-loader doesn't run on Windows

On Windows development env the webpack route-loader is not run, thus bundleKey is not added to page's js files and the 404 info is displayed all the time

React Hot Reload not working on Docker For Windows

I've been looking into getting hot reload to work on docker for windows. I've found out that I need to get webpack to poll files due to the filesystem used in docker for windows mounted volumes, I need to add the below to the webpack configuration but I'm not sure where to add it in the dev.babel.js file (if that is the correct file). I've tried adding it in multiple places but I'm not sure if it's not working or I don't have the configuration correct.

watchOptions: {
    poll: 1000
}

Any help will be greatly appreciated

Firebase Hosting and Functions Support

Should be made to be relatively easy to deploy on Firebase without weighing down the overall boilerplate.

What needs to be done

server.js needs to output ssr only and should not serve assets whatsoever (this can be a build parameter) this can be useful outside of Firebase if using a CDN
server.js should return express app, but shouldn't be listening (this can be changed by developer and doesn't need any changes in repo, right?)
all public facing files should be in a single directory (service worker isn't in there?)

Using json files from public directory

With latest code from master when i create simple test.json in public direcory:

[{
  "id": 1,
  "text": "test1"
}, {
  "id": 2,
  "text": "test2"
}]

and want to load it in lets say home page with:

preLoadData: async ({ api, host }) => {
      return api.fetch(host + "/test.json", { swcache: 20000 });
    },

in development mode everything works ok, but when i run prod version i'm getting

sw.js:26 Uncaught (in promise) Error: An error was thrown by workbox with error code: ;'request-not-cached' with extras: '{"url":"file:///___MY_PROJECT_PATH___/dist/public/build/client.6e57f4686541547d986a.bundle.js","error":{}}'

I know that error comes from SSR that has issues with accessing file but how to handle that situation?
Another small issue is that the host variable that is provided to preLoadData is not realy a host (in the WebAPI Location object meaning) at least on the server side cause it also has protocol part.

Implement Webpack DLL plugin for faster builds

How to load fonts from resources/fonts directory?

I would like to add custom font but it seems that font files are not loaded.
I've put my fonts into resources/fonts/abcd/abcd.eot
added this to my style.scss

@font-face {
  font-family: 'abcd';
  src: font-url(abcd/abcd.eot');
  font-weight: normal;
  font-stylle: normal;
}
html { font-family: abcd; }

Font is not loaded on dev and not copied to dist directory.

Not sure how to add new things into global state

api.fetch method, only accepts json responses?

Hello,

I've been using api.fetch in a page to get data but having a look to the class it's not possible to get other data than a json response from the server, right?

If we use another lib, we will loose state management done in this pawjs/src/libs/api/api.js file, right?

Error in Build regarding router-loader

After following the instructions for routing from the documentation, and running the build script it errors out with the below:

ERROR in ./pages/container.js
Module build failed: TypeError: Cannot read property 'length' of null
    at Object.module.exports (.../loaders/route-loader.js:8:7)

Note:

For the route itself I am wrapping the component in a container using connect() from react-redux but shouldn't kill the routing?

./src/routes.js

./src/pages/index.js

And here Component is simply pointing to a container component like:

import Component from './component'

function mapStateToProps() {
// some mapping here..
} 

export default connect(mapStateToProps)(Component)

Let me know if additional info is required ✌️

Event based server & client calls for proper event management.

Add event based app calling so end-developer can add events like,

Server:
onCompile
beforeStart
afterStart

Client:
onPageLoad
onRedirect

If anyone has more requirements please drop the events requirement here.

Progressive Image Loading Could be Refined

The first image loaded that is small could be smaller. If you don't blur it you could probably get away with it being smaller, then blur it with CSS. That way you could also add a transition for a smooth unblur.

Internal Server Issue

I already resolve the window & navigator(#55) issue
Project is successfully build with no error "node dist/server.js" is also run successfully with no error
but when I'm going to access in browser then I'm getting " 500 Server error occurred"

Error: Minified React error #149; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=149&args[]=carouselWrapper for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Workbox.js

It appears you are using custom service worker code? Maybe using workbox.js would make for a longer term solution as it is being actively maintained, so you wouldn't need to worry about it.

Also, don't take my many issues I've opened as disrespect. I appreciate the work you've done and think you've done a much better job than a lot of the other boilerplates.

Thanks,
Davis

add CDN urls

@tirthbodawala just wanted to ask if there is any way we can add bootstrap CDN or googlemap script tag in the header ?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key="></script>

React Native Hybrid

Angular has https://ionicframework.com/
Where is React's hybrid app framework?

Can we support React Native?

Maybe we should consider a name change too? I've been working on a space/rocket themed site for the documentation too!

<script type="application/ld+json">
{
	"@context": "http://schema.org",
	"@type": "Organization",
	"name": "name",
	"description": "some description",
	"url": "http://some-url.com/",
	"telephone": "+323432423423423",
	"address": {
		"@type": "PostalAddress",
		"addressCountry": "Country"
	}
}
</script>