You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Complete Material Example updates including:
* Webpack 3 🎆
* Heavily simplified/improved build setup (all config lives in `project.config.js` at base level)
* `.eslintrc` no using yaml format instead of JSON
* `firebase-ci` is used for deployment instead of logic within application
* `NewProjectTile` component includes delete button (if you are owner) and handles long names
* Basic database and storage rules included
Copy file name to clipboardExpand all lines: examples/complete/material/README.md
+67-30Lines changed: 67 additions & 30 deletions
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,12 @@
3
3
[![License][license-image]][license-url]
4
4
[![Code Style][code-style-image]][code-style-url]
5
5
6
-
This is a "real-world" example and is deployed to [demo.react-redux-firebase.com](https://demo.react-redux-firebase.com). Project was based on the output of [`generator-react-firebase`](https://github.com/prescottprue/generator-react-firebase), which generates a full project starter with `react-redux-firebase` included.
6
+
## What is Shown
7
+
* Route protection using `redux-auth-wrapper`
8
+
* Data input/validation using `redux-form`
9
+
* Async & Sync route loading
10
+
* Real CI and Deployment settings (including `prod` and `stage` environments)
11
+
* Using different instances of Firebase based on environment
7
12
8
13
## Getting Started
9
14
@@ -13,37 +18,38 @@ This is a "real-world" example and is deployed to [demo.react-redux-firebase.com
13
18
14
19
While developing, you will probably rely mostly on `npm start`; however, there are additional scripts at your disposal:
15
20
16
-
|`npm run <script>`|Description|
17
-
|------------------|-----------|
18
-
|`start`|Serves your app at `localhost:3000`. HMR will be enabled in development.|
19
-
|`build:dev`|Same as `build` but overrides `NODE_ENV` to "development".|
20
-
|`build:prod`|Same as `build` but overrides `NODE_ENV` to "production".|
21
-
|`lint`|Lint all `.js` files.|
22
-
|`lint:fix`|Lint and fix all `.js` files. [Read more on this](http://eslint.org/docs/user-guide/command-line-interface.html#fix).|
21
+
|`npm run <script>`|Description|
22
+
|-------------------|-----------|
23
+
|`start`|Serves your app at `localhost:3000` and displays [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)|
24
+
|`start:simple`|Serves your app at `localhost:3000` without [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)|
25
+
|`build`|Builds the application to ./dist|
26
+
|`test`|Runs unit tests with Karma. See [testing](#testing)|
27
+
|`test:watch`|Runs `test` in watch mode to re-run tests when changed|
28
+
|`lint`|[Lints](http://stackoverflow.com/questions/8503559/what-is-linting) the project for potential errors|
29
+
|`lint:fix`|Lints the project and [fixes all correctable errors](http://eslint.org/docs/user-guide/command-line-interface.html#fix)|
23
30
24
-
## What is Shown
25
-
* Route protection using `redux-auth-wrapper`
26
-
* Data input/validation using `redux-form`
27
-
* Async & Sync route loading
28
-
* Real CI and Deployment settings (including `prod` and `stage` environments)
29
-
* Using different instances of Firebase based on environment
31
+
[Husky](https://github.com/typicode/husky) is used to enable `prepush` hook capability. The `prepush` script currently runs `eslint`, which will keep you from pushing if there is any lint within your code. If you would like to disable this, remove the `prepush` script from the `package.json`.
30
32
31
33
## Application Structure
32
34
33
35
The application structure presented in this boilerplate is **fractal**, where functionality is grouped primarily by feature rather than file type. Please note, however, that this structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this [awesome writeup](https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure) by [Justin Greenberg](https://github.com/justingreenberg).
34
36
35
37
```
36
38
.
37
-
├── bin # Build/Start scripts
38
-
├── config # Project and build configurations
39
-
├── server # Express application that provides Webpack middleware
39
+
├── build # All build-related configuration
40
+
│ └── create-config # Script for building config.js in ci environments
41
+
│ └── karma.config.js # Test configuration for Karma
42
+
│ └── webpack.config.js # Environment-specific configuration files for webpack
43
+
├── server # Express application that provides webpack middleware
40
44
│ └── main.js # Server application entry point
41
45
├── src # Application source code
42
46
│ ├── index.html # Main HTML page container for app
43
47
│ ├── main.js # Application bootstrap and rendering
48
+
│ ├── normalize.js # Browser normalization and polyfills
44
49
│ ├── components # Global Reusable Presentational Components
45
50
│ ├── containers # Global Reusable Container Components
46
51
│ ├── layouts # Components that dictate major page structure
52
+
│ │ └── CoreLayout # Global application layout in which to render routes
47
53
│ ├── routes # Main route definitions and async split points
48
54
│ │ ├── index.js # Bootstrap main application routes with store
49
55
│ │ └── Home # Fractal route
@@ -53,35 +59,66 @@ The application structure presented in this boilerplate is **fractal**, where fu
53
59
│ │ ├── container # Connect components to actions and store
54
60
│ │ ├── modules # Collections of reducers/constants/actions
├── project.config.js # Project configuration settings (includes ci settings)
68
+
└── tests # Unit tests
61
69
```
62
70
63
-
## Learning Resources
71
+
### Routing
72
+
We use `react-router`[route definitions](https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#plainroute) (`<route>/index.js`) to define units of logic within our application. See the [application structure](#application-structure) section for more information.
64
73
65
-
*[Starting out with react-redux-starter-kit](https://suspicious.website/2016/04/29/starting-out-with-react-redux-starter-kit/) is an introduction to the components used in this starter kit with a small example in the end.
74
+
## Testing
75
+
To add a unit test, create a `.spec.js` file anywhere inside of `./tests`. Karma and webpack will automatically find these files, and Mocha and Chai will be available within your test without the need to import them.
66
76
67
-
###Production
77
+
## Production
68
78
69
-
Build code before deployment by running `npm run build:prod`.
79
+
Build code before deployment by running `npm run build`. There are multiple options below for types of deployment, if you are unsure, checkout the Firebase section.
70
80
71
81
### Deployment
82
+
72
83
1. Login to [Firebase](firebase.google.com) (or Signup if you don't have an account) and create a new project
73
84
2. Install cli: `npm i -g firebase-tools`
74
-
3. Login: `firebase login`
75
85
76
-
#### CI
77
-
**Note:** The next steps automatically through config set in the `.travis.yml`. Use `firebase login:ci` to generate a token and set it to `FIREBASE_TOKEN` within your travis config.
86
+
#### CI Deploy (recommended)
87
+
**Note**: Config for this is located within `travis.yml`
88
+
`firebase-ci` has been added to simplify the CI deployment process. All that is required is providing authentication with Firebase:
78
89
79
-
#### Local
80
-
1. Build Project: `npm run build`
81
-
2. Confirm Firebase config by running locally: `firebase serve`
82
-
3. Deploy to firebase: `firebase deploy`
90
+
1. Login: `firebase login:ci` to generate an authentication token (will be used to give Travis-CI rights to deploy on your behalf)
91
+
1. Set `FIREBASE_TOKEN` environment variable within Travis-CI environment
92
+
1. Run a build on Travis-CI
83
93
94
+
If you would like to deploy to different Firebase instances for different branches (i.e. `prod`), change `ci` settings within `.firebaserc`.
95
+
96
+
For more options on CI settings checkout the [firebase-ci docs](https://github.com/prescottprue/firebase-ci)
97
+
98
+
#### Manual deploy
99
+
100
+
1. Run `firebase:login`
101
+
1. Initialize project with `firebase init` then answer:
102
+
* What file should be used for Database Rules? -> `database.rules.json`
103
+
* What do you want to use as your public directory? -> `build`
104
+
* Configure as a single-page app (rewrite all urls to /index.html)? -> `Yes`
105
+
* What Firebase project do you want to associate as default? -> **your Firebase project name**
106
+
1. Build Project: `npm run build`
107
+
1. Confirm Firebase config by running locally: `firebase serve`
108
+
1. Deploy to firebase: `firebase deploy`
109
+
**NOTE:** You can use `firebase serve` to test how your application will work when deployed to Firebase, but make sure you run `npm run build` first.
0 commit comments