alexdevero/react-mobx-react-router-boilerplate

React, React-Router, MobX, MobX-Router and Webpack (heroku-ready) boilerplate with async routes.

🚧 This repository is no longer maintained.🚧

React - MobX - React-Router - Webpack Boilerplate (heroku-ready)

React, MobX, React-Router and Webpack boilerplate with async routes. This boilerplate is also ready for deploying your app to Heroku.

Table of contents

• Install
• Usage
• Support this project
• Code of Conduct
• License

Install

Clone this repo

$ git clone https://github.com/alexdevero/react-mobx-react-router-boilerplate.git

Install dependencies

yarn

or

npm install

Usage

Start project on local server (go to localhost:1337)

yarn start

or

npm start

Build project (in "dist" folder):

yarn run build

or

npm run build

Preview minified production-ready bundle (go to localhost:3000)

yarn run preview

or

npm run preview

Async component loading

Components are now loaded async with react-router-loader and the store is injected via MobX Provider.

Support this project

Development and maintenance of this project takes a lot of time. If you want to support this project and help its author, there are few ways you can do it:

• Starring and sharing the project
• —make one-time donations via PayPal.
• —set up monthly donation via Patreon and get interesting news about what I'm doing.
• —send bitcoins or ethereum to this address: 19jHGagJWeVvuNjN3kaBoAszXd9ea9gKzp.

Thank you!

Code of Conduct

Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

License

MIT © Alex Devero.

react-mobx-react-router-boilerplate's Issues

How to update?

Is it possible to add and update approach for this boilerplate?
I think it's necessary if we want get new feature after any contribution. 😉

Back button navigation doesn't work

... Click on site to navigate to login / members area,
then click browser back button:

location changes but page won't update.

How to load css before js.

How to load css before js. Now this version will have a css redraw process, splash screen。
I think, should add link tag in index.html header

use material ui for smaller repo

Hi @alexdevero ,
I think maybe it's better to use some UI library like material-ui then we have a smaller repo and content specially in src/components directory.

Module build failed: Error: No PostCSS Config found in: /src/styles

Hi. I want to thank you for your code and report an issue which I faced.

For some reason project is working fine locally but not in Docker container.

FROM node:latest
RUN apt-get update && apt-get install -y apt-transport-https
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update && apt-get install yarn
COPY src/ /src/
COPY dist/ /dist/
COPY index.hbs /
COPY package.json /
COPY .npmignore /
COPY postcss.config.js /
COPY webpack.config.js /
COPY webpack.config.production.js /
COPY yarn.lock /
WORKDIR .
RUN yarn
CMD yarn start

ERROR in /node_modules/css-loader!/node_modules/postcss-loader/lib!/node_modules/resolve-url-loader!/node_modules/sass-loader/lib/loader.js?sourceMap!/src/styles/main.scss
Module build failed: Error: No PostCSS Config found in: /src/styles
    at /node_modules/postcss-load-config/index.js:51:26
    at <anonymous>
 @ /src/styles/main.scss 2:14-226 21:1-42:3 21:224-42:2 22:19-231
 @ /src/index.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:1337 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://0.0.0.0:1337 webpack/hot/only-dev-server babel-polyfill whatwg-fetch ../src/index.js

I solved this by explicitly setting path to the postcss.config.js in webpack config files.

use: [
  { loader: 'style-loader'},
  { loader: 'css-loader', options: { sourceMap: true } },
  { loader: 'postcss-loader', options: { sourceMap: true, path: 'postcss.config.js' } },
  { loader: 'resolve-url-loader' },
  { loader: 'sass-loader', options: { sourceMap: true } }
]

Add some note and guideline about folder structure

Hi @alexdevero I think it's very useful if we have some note and guideline about folder structure in this boilerplate then we can start using this more faster.
For example then I can add my custom login process and page more faster than discover all thing myself.

Maybe some short note in README file can helpful.

Is it ready for production?

Hi @alexdevero ,
Is this repo ready for production?
I want to start new project base on this boilerplate and want to know is it update enough? (all package.json version)