atyantik/pawjs

A highly scalable & plugable, Progressive Web Application Framework with the best Developer Experience. This framework utilizes the power of React with Webpack and is build on top of webpack/tapable for unlimited extendability.

Paw JS - The plugable framework

A highly scalable & plugable, Progressive Web Application Framework with the best Developer Experience. This framework utilizes the power of React with Webpack and is build on top of webpack/tapable for unlimited extendability.

No configuration required

You start the development with nothing but just one single file i.e. src/routes.js

Getting Started

To install and get started with PawJS execute the following commands:

1. Clone the repo to your local PC and go to the installation

git clone https://github.com/Atyantik/pawjs.git && cd pawjs

2. Install the dependencies

npm install

3. Prepare the packages and demo project

npm run prepare-demo

4. Start the demo project

npm run start

Features

PWA - Progressive Web Applications

Create Progressive web application with ReactJS. As we all know, Progressive Apps are not supported everywhere, but we have added support for Safari & Chrome so your application can work as standalone applications when added to home-screen or saved as desktop app.

Code splitting

The very difficulty faced when developing enterprise application is code splitting. We don't need everything in a single JS file. Why not simply split the code with import() and create bundles! We make it really easy here to just create a page that returns an array of routes. Code is split and loaded automatically when the respective route is called.

ES6/7 Compatible

Using babel, we support next generation JavaScript syntax including Object/Array destructuring, arrow functions, JSX syntax and more...

Universal Routing with React-Router

We are using the most accepted React router for routing the application. Add your favorite /about, /contact, /dashboard pages.

Offline support with Google Workbox

Yes your application is offline available. Run without internet. Pretty cool huh?? Well all thanks to service workers and google workbox for handling the cache & network strategies.

SSR - Server side rendering

The best way to get your application SEO-ed is enable Server side rendering i.e. Universal applications You can have SSR running during development as well.

SEO

Our customized routes enable creating meta tags to create Twitter, Google+, Linkedin, Facebook cards. We know how important SEO is to an application.

HSTS Supported

Enable HSTS for secure sites. Options to define maxAge and preload of HSTS. All with very simple configuration.

Supporters

Atyantik Technologies Private Limited

Everyone at Atyantik Technologies is contributing their free time for contributing to the project and core discussions.

License

This project is licensed under the MIT license, Copyright (c) 2018 Atyantik Technologies Private Limited. For more information see LICENSE.md.

pawjs's Issues

Not working build

Hello, I have been developing my new app with pawjs for several weeks so far and now the deploy time has came. However, when I tried to run build with following command: npm run build && node dist/server.js (on new machine with clean deps install) it fails on following error: Error: Cannot find module "../app/components/Error/404"

Interestingly, I tried to build on another machine (old deps installed weeks ago) and it gives me another error: TypeError: n is not a function. But main point is, it fails on node dist/server.js command...
what can I do? Or how can I bypass it at least temporary?
Do you need any other info from me in order to debug it more properly?

Thank you very much advance.

Modifying config dynamically

QUESTION
Is it possible to set PWA config properties dynamically?

Based on the URL that I want to generate a different config and different page title based on parameters in the url. Can paw support this?

Problem with LoadableComponent. Null reference.

During routing between different paths I often encounter below error. Need to refresh page. Can't find deterministic cause for this. Any ideas, suggestions? Not sure if bug or problem with my setup

Cannot read property 'loading' of null

TypeError: Cannot read property 'loading' of null
    at LoadableComponent.loadModule (webpack:///./node_modules/@pawjs/pawjs/src/components/Loadable.js?:297:18)
    at LoadableComponent.loadModule (webpack:///./node_modules/react-hot-loader/dist/react-hot-loader.development.js?:730:25)
    at LoadableComponent.componentWillMount (webpack:///./node_modules/@pawjs/pawjs/src/components/Loadable.js?:246:14)
    at callComponentWillMount (webpack:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js?:2576:299)
    at mountClassInstance (webpack:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js?:2579:216)
    at updateClassComponent (webpack:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js?:3061:81)
    at beginWork$1 (webpack:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js?:3430:943)
    at HTMLUnknownElement.callCallback (webpack:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js?:127:102)
    at Object.invokeGuardedCallbackDev (webpack:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js?:147:45)
    at invokeGuardedCallback (webpack:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js?:162:126)
Component Stack:

    in AppContainer (created by HotExportedApp)
    in HotExportedApp
    in ErrorBoundary

Thank you

window is not defined issue even serverSideRender is set to false

build is blocked by an error thrown on the serverSide.

steps to replicate:

1. download project
2. npm i && npm start

react-pwa-with-owl.zip

CSS Load Order different in Dev vs Prod

I have the following import statements in my client.js file -

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/slick-carousel/slick/slick.css";
import "../node_modules/slick-carousel/slick/slick-theme.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";
import "./resources/css/global.css";

In the development mode my global.css styles have higher preference than bootstrap which is as expected. But in Production the order of the CSS files loading changes with my custom css (global.css) loading before Bootstrap leading to an undesired situation.

I am using [email protected]

on browser back event route loadData is not triggering

@tirthbodawala , please find the video of the issue below.

https://d.pr/v/XTvey7

Struggling with Changing the Meta Titles

Hi,

I followed the instructions to change the meta titles using the following

routeHandler.setPwaSchema({
      name:"Culture",
      short_name: "Culture",
      display: "standalone",
      background_color: "#3805A7",
      theme_color: "#3805A7",
      lang: "en-US",
      icons: [
        {
          src: PwaIcon192,
          sizes: "192x192"
        },
        {
          src: PwaIcon512,
          sizes: "512x512"
        }
      ]
    });

inside of Routes.js

but it's like it keeps getting overwritten when i build. can you tell me what i'm doing wrong?

How to change port dynamically

How to change port dynamically via command in terminal also how to read port from .env file?

image-optimization page not found

Hi there
First I would thank the people behind this boilerplate.
That said... :)
I think there is a minor issue on /image-optimization route.
It shows a notFound page.
Issue is only on pawjs demo (not on react-pwa)

CSS loading order

When the components are imported (For Eg: import Home from "./app/components/home") then the custom CSS loads before the Global CSS and hence Global CSS overrides the custom CSS changes.

Modifying page properties

Any way to set global styles on body or html?

Support for Recoil.js

Any chance recoil will be supported?
It has relatively simpler interface than redux so I expect a plugin to be easy to whip up.

I have tried unsuccessfully to adapt the pawjs-redux plugin with this error:

A Server error has occurred
Error Stack:
This component must be used inside a <RecoilRoot> component.


Error: This component must be used inside a <RecoilRoot> component.
    at Object.notInAContext (webpack-internal:///./node_modules/recoil/es/recoil.js:1546:9)
    at getRecoilValueAsLoadable (webpack-internal:///./node_modules/recoil/es/recoil.js:1312:2315)
    at useRecoilValueLoadable_LEGACY (webpack-internal:///./node_modules/recoil/es/recoil.js:2554:10)
    at useRecoilValueLoadable (webpack-internal:///./node_modules/recoil/es/recoil.js:2568:12)
    at useRecoilValue (webpack-internal:///./node_modules/recoil/es/recoil.js:2586:18)
    at useRecoilState (webpack-internal:///./node_modules/recoil/es/recoil.js:2638:11)
    at TT (webpack-internal:///./src/components/auth/register.js:39:64)
    at renderWithHooks (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:14804:14)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:17483:7)
    at beginWork (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:18597:8)


Component Stack:

    in TT (created by Context.Consumer)
    in _default
    in ErrorBoundary
    in Unknown (created by Context.Consumer)
    in withRouter() (created by Context.Consumer)
    in Route
    in Switch
    in ErrorBoundary
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp
    in RecoilRoot
    in Router
    in ErrorBoundary

Here's my client.js in the plugin:

export default class RecoilClient {
  constructor() {
    this.hooks = {
      recoilInit: new AsyncSeriesHook(["state"]),
    };
  }

  apply(clientHandler) {
    clientHandler.hooks.beforeLoadData.tapPromise(
      "AddRecoilProvider",
      async (setParams, getParams) => {
        const state = {
          setInitialState: (iState) => {
            // initialState = cloneDeep(iState);
          },
          getInitialState: () => {
            // if (typeof initialState === 'undefined') return {};
            // return cloneDeep(initialState);
            return {};
          },
        };
        await new Promise((r) => this.hooks.recoilInit.callAsync(state, r));
      }
    );

    clientHandler.hooks.beforeRender.tapPromise(
      "AddRecoilProvider",
      async (app) => {
        // eslint-disable-next-line
        app.children = <RecoilRoot>{app.children}</RecoilRoot>;
      }
    );
  }
}

It works when I add the recoil package directly to pawjs like below so I believe the issue is with plugin handling

// src/client/handler.tsx
...
const children = (
      // eslint-disable-next-line react/jsx-props-no-spreading
      <components.appRouter basename={this.options.env.appRootUrl} {...routerParams}>
        <RecoilRoot>{appRoutes.renderedRoutes}</RecoilRoot>
      </components.appRouter>
    );
...

Support for defining a proxy to avoid CORS

Is there any support to create proxy configurations to avoid CORS in development environment ?
How you recommend us to implement this in a project based on pawjs ?

How can we implement Reducer Injection Approaches for Redux?

I want to use inject reducer dynamic for web performance in redux based on page wise which used specifically for that page only.
Redux also provided this solution mentioned in below link. so can we impement this one in our setup?
https://redux.js.org/usage/code-splitting

Service Worker errors locally

Steps to reproduce

Just cloned, built and switched serviceWorker to true in pawconfig.json

I see this in the console:

A bad HTTP response code (404) was received when fetching the script.

Failed to load resource: net::ERR_INVALID_RESPONSE

(index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

Image of console

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

persisting redux middleware

How to implement redux-persist in this framework?

Changing the location of the manifest.json file

I would like to manage the manifest.json on a separate domain. Is it possible to change the location of the manifest.json to something dynamic?

Adding a loader to the webpack config

I can't seem to find any generic examples of how to extend the webpack config. I would like to add a loader to handle an .mp4 file.

How to upgrade from pawjs v1

is there any documentation? how to use this library, and service worker seems doesn't work

Support for styled-components

Any chance support for styled-components is on the roadmap?

getSearchParams return closure for server side access.

getSearchParams should be a function that should return URLSearchParams.

Sample using redux-saga

client.js

function enhancer(sagamw) {
  return next => (reducer, initialState, enhancer) => {
    const thisStore = next(reducer, initialState, enhancer);
    sagamw.run(mySaga);

    return thisStore;

  };
}

export const reduxEnhancers = [enhancer(sagaMiddleware)]
export const reduxMiddlewares = [sagaMiddleware];

do the same on your server.js

Hard Source WebPack Plugin

https://github.com/mzgoddard/hard-source-webpack-plugin

We will try to use this plugin to make consecutive builds faster.

Suddenly getting "TypeError: Cannot read property 'indexOf' of null at sw.js" error in console in all production pawjs project

https://d.pr/i/NE3paG suddenly getting this error in all pawjs projects.
Link: https://demo.reactpwa.com/
Browser: Chrome Version 89.0.4389.82
Device: MacOS 11.2.2

There is no method in response called getHeaders()

In the file memory.js there are two places where res.getHeaders() is used. However, there is no such function.

await inside of async apply(clientHandler) causes crashes on older Safari IOS

@tirthbodawala

• It appear that placing the await inside of async apply(clientHandler) causes crashes on some older Safari IOS browsers (on client side navigation), the cause may be related to some conflicts / scoping issues between nested async
• The setParams functions were never called on those browsers.