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.

Overview

Backers on Open Collective Sponsors on Open Collective Dependencies Status devDependencies Status Build Status Known Vulnerabilities Greenkeeper badge

Join the chat at https://gitter.im/react-pwa

React PWA v2

A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience.

Demo: https://demo.reactpwa.com

Quick Start

Clone the repository:

git clone https://github.com/Atyantik/react-pwa.git && cd react-pwa 

Install the dependencies:

npm install

To start the project run following command in your terminal:

npm start

To build the project run the following command in your terminal:

npm run build

PawJS

Proudly supported by PawJS
https://github.com/Atyantik/pawjs

Features

PWA - Progressive Web Applications

Using ReactPWA you can create Progressive web application with simple knowledge of React.JS. 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 homescreen or saved as desktop app.
Read More

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 create individual JS files for each respective module/page! 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.
Read More

ES6/7 Compatible

Using babel, we support next generation JavaScript syntax including Object/Array destructuring, arrow functions, JSX syntax and more...
Read 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.
Read More

Offline support

Yes your application is offline available. Run without internet. Pretty cool huh?? Well all thanks to service workers.
Read More

SSR - Server side rendering

The best way to get your application SEO-ed is enable Server side rendering i.e. Universal applications.
Read More

SEO

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

HSTS Supported

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

Now you are all set, Get your hands dirty with this awesome boilerplate.

Known bug

For installed version of @pawjs/pawjs@ts there is a known bug of SEO params not updating in non-SSR mode i.e. Single Page Application mode. Please revert to version @pawjs/[email protected] if required.

Examples

Firebase Cloud Messaging

Need contributors.

This project exists thanks to all the people who contribute. [Contribute].

We are actively looking for contributors for testing and documentation. Please contact us: admin [at] atyantik.com or contact [at] atyantik.com

Visit us at Atyantik Technologies Private Limited

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Supporters

Atyantik Technologies Private Limited

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

DigitalOcean

DigitalOcean has been supporting the open-source project since the very start and has given a dedicated free server to host the website and host the demos. Their contribution is invaluable to the project.

Eventerprise.com

Eventerprise is the first company to implement react-pwa, The whole idea of PWA applications with react was created with unique requirement of Eventerprise. Do try the application.

Browser stack

Thanks to Browser stack we are able to test the PWA nature of application on various mobiles and write automated test cases.

Navicat

We are very thankful to Navicat for offering their support to the project and providing us an open-source license for further project development.

License

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

Comments
  • How can I use FCM?

    How can I use FCM?

    I tried to use firebase cloud messaging inside pwa, but when I request to get FCM token, getting error below ;

    FirebaseError {code: "messaging/failed-serviceworker-registration", message: "Messaging: We are unable to register the default s…). (messaging/failed-serviceworker-registration).", browserErrorMessage: "Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').", stack: "FirebaseError: Messaging: We are unable to registe…ebpack-internal:///937:262:39)↵ at "}

    Maybe FCM only works in production mode?

    enhancement 
    opened by ThunderBoltEngineer 13
  • React Hot Reload not working on Docker For Windows

    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

    bug help wanted 
    opened by SC7639 13
  • Include CSS from node_modules

    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

    opened by mrtysn 13
  • Firebase Hosting and Functions Support

    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?)
    opened by dav-is 13
  • Error 500 before loading home page

    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

    bug awaiting reply 
    opened by ezwon 12
  • "npm start" is not working

    while I am trying to run the project I am getting bellow error.

    Please note : I have not done any changes to project and I am running code from master branch . I tried with yarn also . node: 12.19.0v

    ERROR:

    SyntaxError: D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\watchpack\lib\chokidar.js: 'return' outside of function (4:1)
    
      2 | try {
      3 |   module.exports = require("chokidar");
    > 4 |   return;
        |   ^
      5 | } catch(e) {
      6 |   v3Err = e;
      7 | }
        at Object._raise (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\error.js:60:45)
        at Object.raiseWithData (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\error.js:55:17)
        at Object.raise (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\error.js:39:17)
        at Object.parseReturnStatement (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\statement.js:563:12)
        at Object.parseStatementContent (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\statement.js:197:21)
        at Object.parseStatement (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\statement.js:151:17)
        at Object.parseBlockOrModuleBlockBody (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\statement.js:871:25)
        at Object.parseBlockBody (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\statement.js:841:10)
        at Object.parseBlock (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\statement.js:811:10)
        at Object.parseTryStatement (D:\ResumeBuilder\V03\avinash-resume-pwa\node_modules\@babel\parser\src\parser\statement.js:653:23) {
      loc: Position { line: 4, column: 1 },
      pos: 57,
      code: 'BABEL_PARSE_ERROR'
    }
    
    opened by akunal1 10
  • Error in Build regarding router-loader

    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 image

    ./src/pages/index.js image

    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 :v:

    awaiting reply 
    opened by bytewiz 10
  • Progressive Image Loading Could be Refined

    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.

    need-example 
    opened by dav-is 10
  • Environment Variable Support similar to React

    Environment Variable Support similar to React

    Is there a way to declare environment variables without installing dotenv npm package. React did this in a very nice fashion by declaring env variables in .env.local and .env.production file.

    need-example 
    opened by kumarsandeep91 9
  • Activating Open Collective

    Activating Open Collective

    This pull request adds backers and sponsors from your Open Collective https://opencollective.com/react-pwa ❤️

    It adds two badges at the top to show the latest number of backers and sponsors. It also adds placeholders so that the avatar/logo of new backers/sponsors can automatically be shown without having to update your README.md. [more info]. See how it looks on this repo. We have also added a postinstall script to let people know after npm|yarn install that you are welcoming donations (optional). [More info] You can also add a "Donate" button to your website and automatically show your backers and sponsors there with our widgets. Have a look here: https://opencollective.com/widgets

    P.S: As with any pull request, feel free to comment or suggest changes. The only thing "required" are the placeholders on the README because we believe it's important to acknowledge the people in your community that are contributing (financially or with code!).

    Thank you for your great contribution to the open source community. You are awesome! 🙌 And welcome to the open collective community! 😊

    Come chat with us in the #opensource channel on https://slack.opencollective.com - great place to ask questions and share best practices with other open source sustainers!

    opened by asood123 9
  • Can't npm start

    Can't npm start

    Hello,

    I got this issue when npm start

    pawjs --no-cache --env=development start
    
    sh: pawjs: command not found
    npm ERR! code ELIFECYCLE
    npm ERR! syscall spawn
    npm ERR! file sh
    npm ERR! errno ENOENT
    npm ERR! [email protected] start: `pawjs --no-cache --env=development start`
    npm ERR! spawn ENOENT
    npm ERR! 
    npm ERR! Failed at the [email protected] start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/admin/.npm/_logs/2020-04-07T13_56_46_527Z-debug.log
    

    on the log file

    0 info it worked if it ends with ok
    1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
    2 info using [email protected]
    3 info using [email protected]
    4 verbose run-script [ 'prestart', 'start', 'poststart' ]
    5 info lifecycle [email protected]~prestart: [email protected]
    6 info lifecycle [email protected]~start: [email protected]
    7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
    8 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Volumes/Data/Coding/react-redux-universal-hot-example/react-pwa/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
    9 verbose lifecycle [email protected]~start: CWD: /Volumes/Data/Coding/react-redux-universal-hot-example/react-pwa
    10 silly lifecycle [email protected]~start: Args: [ '-c', 'pawjs --no-cache --env=development start' ]
    11 info lifecycle [email protected]~start: Failed to exec start script
    12 verbose stack Error: [email protected] start: `pawjs --no-cache --env=development start`
    12 verbose stack spawn ENOENT
    12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
    12 verbose stack     at ChildProcess.emit (events.js:198:13)
    12 verbose stack     at maybeClose (internal/child_process.js:982:16)
    12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
    13 verbose pkgid [email protected]
    14 verbose cwd /Volumes/Data/Coding/react-redux-universal-hot-example/react-pwa
    15 verbose Darwin 19.3.0
    16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
    17 verbose node v10.16.0
    18 verbose npm  v6.14.4
    19 error code ELIFECYCLE
    20 error syscall spawn
    21 error file sh
    22 error errno ENOENT
    23 error [email protected] start: `pawjs --no-cache --env=development start`
    23 error spawn ENOENT
    24 error Failed at the [email protected] start script.
    24 error This is probably not a problem with npm. There is likely additional logging output above.
    25 verbose exit [ 1, true ]
    
    opened by kien-pham 8
Releases(v2.2.11)
Full-Stack solution to quickly build PWA applications with Vue.js and Firebase

Welcome to bento-starter ?? ?? bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications usin

Franck Abgrall 1.5k Jan 5, 2023
Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You can download or clone it to speed up your projects.

mcrn-event-booking-app-starter Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You

Roy Chen 43 Dec 19, 2022
A boilerplate for Node.js web applications

Hackathon Starter Live Demo: https://hackathon-starter.walcony.com Jump to What's new? A boilerplate for Node.js web applications. If you have attende

Sahat Yalkabov 34k Dec 28, 2022
A Svelte template built with newsroom CMS's in mind

A Svelte starter template built with newsroom CMS's in mind. Dynamically create inline graphics based on the placement of figure elements with defined data-chart attributes.

Sawyer Click 15 Dec 30, 2022
React Native Boilerplate - The Boilerplate contains all the basic packages, common components and, prebuilt code architecture

The Boilerplate contains all the basic packages, common components and, prebuilt code architecture. It will save developer's project setup time.

MindInventory 36 Dec 26, 2022
Solana Boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping.

Lightweight boilerplate for Solana dapps. Allows quick building and prototyping. Feel free to contribute or fork this repository. Make it yours! Leave us a ⭐️ if this repo helped you.

null 21 Nov 15, 2022
(WIP) Universal PWA Builder

WORK IN PROGRESS Features Framework Agnostic Build with your preferred framework or with none at all! Official presets for Preact, React, Vue, and Sve

Luke Edwards 3.1k Dec 26, 2022
Node Express Template (NET.ts) - a small template project which help you to speed up the process of building RESTful API

Node Express Template (NET.ts) - a small template project which help you to speed up the process of building RESTful API

Przemek Nowicki 26 Jan 4, 2023
Apollo Server Express Boilerplate

Boilerplate for graphql and graphql-ws using Apollo Server Express and powered by TypeORM and TypeGraphQL to make your work is quicker and easier.

Arya W Pratama 10 Dec 14, 2022
✨ Create server-rendered universal JavaScript applications with no configuration

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yours

Jared Palmer 11k Jan 8, 2023
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Start your next react project in seconds A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices Cr

react-boilerplate 28.9k Jan 7, 2023
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Jan 1, 2023
DDD/Clean Architecture inspired boilerplate for Node web APIs

Node API boilerplate An opinionated boilerplate for Node web APIs focused on separation of concerns and scalability. Features Multilayer folder struct

Talysson de Oliveira Cassiano 3k Dec 30, 2022
IDE and toolkit for building scalable web applications with React, Redux and React-router

An all-in-one solution for creating modern React apps Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It

Rekit 4.5k Jan 2, 2023
Web applications with node.js and React

Electrode Web Applications with node.js and React The Electrode project was developed to make node.js and React the primary tech choices for developin

Electrode 2.1k Dec 10, 2022
Opinionated SvelteKit Template for building web applications.

Opinionated SvelteKit Template for building web applications.

Manassarn 7 Jan 1, 2023
🚀 A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript

?? A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript ⚡️ Made with developer experience first ESLint + Prettier + Lint-Staged + VSCode setup

null 4 Nov 28, 2022
A default Next.js project with boilerplate packages and configurations. Includes Tailwind, TypeScript (strict), ESLint, Prettier, and Husky.

Yet another Next.js project template This template includes a set of our favorite dev tools scaffolded into a Next.js project. Tools include: TypeScri

Joey McKenzie 16 Dec 27, 2022
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Cory House 9.8k Jan 3, 2023