Work in progress, no docs as yet, but it might be worthwhile to checkout the commits, for example, look at #15, initial integration of bootstrap and bootswatch based ReactPathly "sub-theme" so I can work directly in Sass in my watchify/browser sync workflow.
Initial MVP of this educational app will be ready some time in May. Currently adding redux and redux async middleware to communicate with server.
An app to help you choose your own path to ReactJS and follow it step by step. And which also serves as an up-to-date non-trivial React, React Router and Redux example with custom SCSS bootswatch/bootstrap theme, ReactPathly.
The ReactPathways example app is based on the latest versions of React, React Router and Redux, served up by a NodeJS/Express server which also exposes a REST API to provide data for the app.
Full stack Ecosystem (minimalist set of dependencies):
- NodeJS server side
- NodeJS/Express based REST API and react-router savvy static serving
- MongoDB data persistence and mongoose Schemas
- Token based JWT token based authentication server
- Modular structure
- React front end app
- React and ReactDOM
- Redux
- Redux Thunk middleware for asynchronous dispatch
- Isomorphic fetch and babel polyfill for asynchronous requests to the server
- Support for token based JWT authentication
- Bootstrap Sass / Material-UI custom theming support integrated into build system
- Build system
- Browserify/Watchify/Babelify integrated into npm scripts for JSX and ES2015 transpiling, and node-sass Sass preprocessing. So you can get all the "hot" benefits and still see/control what's going on. Look ma', no webpack or gulp!
- Separate development and production workflows
- Browsersync starts your "hot" browser right up and keeps it in sync
If you're interested in seeing what's going on behind the scenes, check out the MVP01 issue queue. There are two versions of MVP01 in this repo:
- Staging is right here on
master
branch (demo coming soon). Run that if you want to check current stable version of ReactPathways. - Dev is on branch
mvp01
.
ReactPathways now persists data in mongodb, exposed on the server (server.js
) via a REST API, and is consumed and maintained in application state via Redux. See results of store.getState()
in console:
There are some sample mongodb scripts in ./scripts/db
, including ./scripts/db/db-insert-steps.js
which you can run in order to insert some sample data, using the following command:
$ mongo ./scripts/db/db-insert-steps.js
No global dependencies other than node
and git
, in order to manage tool-chain releases on a per-project basis.
$ git clone https://github.com/awebfactory/react-pathways.git
$ npm install
In order to transpile ES6, JSX found in src
and CSS pre-processor files found in styles
, on a one-time basis, producing a public/js/bundle.js
file and a public/css/main.css
file ready to be run locally with npm start
or for deployment on a server, do:
$ npm run build
Then, to run the app (assuming that mongodb is running locally on the usual port and has some sample data (see ./scripts/db
):
$ npm start
and point your browser at http://localhost:3000
.
See the npm scripts in package.json
In dev mode, changes in either sass or js/jsx files will automatically trigger rebuilding the ./public/css/main.css
and/or ./public/js/bundle.js
files on-the=fly, and a refresh of the browser will show the changes without have to manually re-run the build process.
If this is a first time session installation, do:
npm run build
To start a dev watch session (automatic rebuilding and rebundling for src/js and styles/sass files), do:
$ npm run watch
Note that this can be used locally or on a server or cloud based IDE!
Leave those processes running in the terminal, start another and do:
$ npm start
and point your browser at http://localhost:3000
.
In conjunction with dev watch on a server or cloud IDE, I'll typically have three terminal tabs or windows open:
- one for git and other dev process tasks
- one running
npm run watch
- one running
npm start
Leave those watch processes running in one terminal, start another and do:
$ npm run dev
After a bit, your open browser gets another tab, the app "magically" comes up of its own accord (and is refreshed automatically with any changes in *.js
or *.sass
files) and you should be seeing something like the following:
BrowserSync server listening url 0.0.0.0 on port 3000 in development mode
[BS] Proxying: http://localhost:3000
[BS] Access URLs:
------------------------------------
Local: http://localhost:3001
External: [device ip:port]
------------------------------------
UI: http://localhost:3002
UI External: [device ip:port]
------------------------------------
[BS] Watching files...
With BrowserSync I'll typically have three terminal tabs or windows open:
- one for git and other dev process tasks
- one running
npm run watch
- one running
npm run dev