I like short README's so here we go 😎

With Create React App (CRA) we can start easy with a new react project but we still need to do some tricky parts to make it work. For developers who are starting with react it's not clear what to do next and for the experienced it's anoing to repeat for every project the basic setup and configuration like the routing, intl, auth and other main parts of most applications. The latest CRA versions give us the opportunity to create our own custom templates. Templates are nice but not the solution that solves our problems. We need a tool from witch we can start out very easy and get updates during time for bugfixes and API changes of the dependencies. Sounds like a framework? I don't think that there is a need for a react framework. Everyone can make his project up and running in short time.

This project want's to provide templates for new projects that can be updated during usage but won't update so frequently like frameworks. We can start with each of them using a simple CLI command. They can be configured over configs and most parts can be replaced with custom ones. To cover most use cases this project has multiple templates:

The basic react setup (routing, intl, async load). It has an optimised routing where the initial load page is completely separated from rest of the routing to ensure best performance for applications that need to scale. Simple and easy intl based on react-intl and async load using the new react suspense API. The resulting template is very basic and has not more than basic htmlinside. To start a new project with this template just run this command:

npx create-react-app my-app --template base
cd my-app
npm start

Includes all features from base-shell expanded with Material-UI. It has some basic pages like Page not found, a responsive menu and other configurations for Material-UI. To start a new project with this template just run this command:

npx create-react-app my-app --template material-ui
cd my-app
npm start

base-shell + material-ui-shell +

• Firebase Take your app to the cloud, enabling the possibility to:
  • Real time database updates
  • OAuth with the major platforms
  • Monitoring, metrics, reports...
  • CDN as a storage layer for static assets, for Ultra Quick Delivery Anywhere in the World
  • And much more...

Any help here is welcome 😄

Just run this command:

npx create-react-app my-app --template rmw
cd my-app
npm start

If you are using this npx command make sure to uninstall create-react-app on your device to have the newest version. To do so run:

npm uninstall create-react-app

Here you go DEMO. The DEMO is just a DEMO. It has no real purpose "to do" some useful stuff. Just to show you what your project could look like.

React Most Wanted is a React Starter Kit based on Create React App and Material-UI that uses Firebase.

Check this out:

• It is built with CRA and even if you use this Starter Kit your CRA scripts will work properly. You will be able to make every CRA update as if you have started with it. We don't eject anyone from CRA 😄.
• It is based on our rmw-shell library which keeps your project up to date when we make bugfixes or add new features. It is like a shell for your project where the hard work is already done for you.
• There is a simple script to start a fresh project without forking anything npx create-react-app test-app --scripts-version rmw-react-scripts.
• It has all "MOST WANTED" features built in. That is where the name comes from 😉 We will come to the features bit a little bit later.
• It is customizable.
• It uses Firebase 😄.
• It is a Best Practice Project PWA (Progressive Web Application).
• You will love it once you start using it 😄.

Let's take a look at some of them:

• Material UI Material Design ready-to-use React Components
• Code splitting MPA (Multiple Page Application) ready. Large codebases can be splitted into separate bundles that load different parts of the application, lazy-loading the different bundles on demand.
• Redux predictable state management, by enforcing a strict unidirectional data flow and state immutability.
• Firebase to Redux sync: sync your state automatically to the cloud using firebase.
• Authentication: User login / registration built in.
• Authorization Roles and permissions built in.
• Push notifications UI integration
• Theming
• Internationalisation
• Built-in CI (Continuous Integration)
• Built-in CD (Continuous Deployment)
• Realtime forms (isn't that awesome 😄)
• ... and a lot more I just can't remember

Sure. It is a project made over years and still fully supported. Reason for that is that we use it in our company for production projects so it has to work for at least some years. Good enough for the JavaScript ecosystem 😉.

The information you are seeking is scattered over some Medium articles written by me at the time I was working on solving some problems in this project. So they should explain some core parts in detail:.

• Beyond create-react-app
• Organising your Firebase Cloud Functions
• Firekit concepts to sync Firebase and Redux
• Firebase and react Continuous Deployment
• Redux simple values
• React Most Wanted

We have you covered. Here is a Codelab that will walk you trough the whole process of creating a new project and deploying it.

It depends on your problem. If you have a question please join our Gitter room. If you notice an issue in the project don't hesitate to fill out an issue report to this project here.

YEEEEEEES 😄 Everyone is welcome to send PRs and if you don't know where to start just write to me on twitter. There is always some work to do.

And if you don't have time to code with us show some 💙 and give this project a ⭐ and tell the 🌍 about it.

YES!

Thank you to BrowserStack for providing the infrastructure that allows us to test in real browsers. Thanks to @SiradDev for creating the logo for this project 😄.

• finish tests

MIT