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
This is a [zero](https://github.com/commitdev/zero) module which sets up a
7
-
service which can be deployed to the environment set up with [zero-aws-eks-stack](https://github.com/commitdev/zero-aws-eks-stack).
8
-
It also contains a simple CircleCI pipeline which defines how to build and deploy the assets.
3
+
This is a [Zero] module which sets up a
4
+
React web-app bundled statically served through CloudFront and S3 from the [zero-aws-eks-stack][zero-infra].
5
+
6
+
The `/templates` folder is meant to be filled in via [Zero][zero] and results in Simple React application. It also contains a simple CircleCI pipeline which defines how to build and deploy the service.
7
+
8
+
This repository is business-logic agnostic; mainly showcasing some universal best practices:
9
+
10
+
- Creating an optimized build of your frontend application.
11
+
- Out of the box CI/CD flow CircleCi.
12
+
- testing
13
+
- building your web-app as a static distribution in /dist folder.
14
+
- syncs the built bundle to AWS S3.
15
+
- invalidates Cloudfront cached version.
16
+
17
+
## Repository structure
18
+
19
+
___
20
+
21
+
```sh
22
+
/ # file in the root directory is for initializing the user's repo and declaring metadata
23
+
|-- Makefile #make command triggers the initialization of repository
24
+
|-- zero-module.yml #module declares required parameters and
25
+
|# files in templates become the repo for users
26
+
| templates/
27
+
||
28
+
||-- docs/
29
+
||| create-react-app.md #documentation on how work with your react application and external developer resources.
30
+
||-- public/
31
+
|||-- favicon.ico
32
+
|||-- index.html
33
+
|||-- logo192.png
34
+
|||-- logo512.png
35
+
|||-- manifest.json
36
+
|||-- robots.txt
37
+
||-- src/ #src contains your react application code
38
+
||-- .gitignore
39
+
||-- README.md
40
+
||-- package.json
41
+
||-- yarn.lock
42
+
43
+
```
44
+
45
+
## Prerequisites
46
+
47
+
- Have CircleCI and GitHub token setup with the Zero project.
48
+
- CI-user created via EKS-stack with access to AWS S3.
49
+
50
+
___
51
+
52
+
## Initialization
53
+
54
+
This step is meant to be executed during `zero apply`, includes following steps:
55
+
56
+
- Adding environment variables to CircleCI project.
57
+
- Linking the CircleCi with the GitHub repository
58
+
- Linking the circleCI will automatically trigger the first build and deploy your application to AWS S3
59
+
60
+
___
61
+
62
+
## FAQ
63
+
64
+
Why is my frontend application not yet accesible?
65
+
66
+
- It takes about 20 - 35 mins for your deployed application to be globally available through AWS CloudFront CDN.
9
67
10
68
### Backend Repo
11
69
12
-
The corresponding backend for this app is [zero-deployable-backend](https://github.com/commitdev/zero-deployable-backend).
70
+
The corresponding backend for this app is [zero-deployable-backend].
Copy file name to clipboardExpand all lines: templates/README.md
+20-73Lines changed: 20 additions & 73 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,91 +1,38 @@
1
-
## Commit Zero
1
+
#<% .Name %> Frontend
2
2
3
-
This app is created to work with Commit Zero. You'll need to run the `zero` application against a `zero.yml` file to generate the code.
3
+
## Getting Started
4
4
5
-
### Zero Command
6
-
7
-
```bash
8
-
zero -config <config file><source directory><destination directory>
9
-
```
10
-
11
-
#### Config File
12
-
13
-
See `example.yml` for the full example.
14
-
15
-
```yaml
16
-
---
17
-
name: example-commit-zero-frontend
18
-
19
-
# params are key value pairs passed into templates
20
-
params:
21
-
22
-
# Application config
23
-
24
-
# production host name
25
-
productionHost: fe-test.commitzero.com
26
-
productionBucket: fe-test.commitzero.com
27
-
28
-
# staging host name
29
-
stagingHost: fe-test.commitzero.com
30
-
stagingBucket: fe-test.commitzero.com
31
-
32
-
```
33
-
34
-
_Once you've templated this out, you can remove the above section from this README as it's no longer needed._
35
-
36
-
---
37
-
38
-
# <% .Name %>
39
-
40
-
## Create React App
41
-
42
-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
5
+
You now have a repo to create your frontend application. This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
43
6
44
7
See full documentation [here](docs/create-react-app.md)
45
8
46
-
### Commands
9
+
___
47
10
48
-
#### Install Dependencies
11
+
##Deployment
49
12
50
-
```zsh
51
-
yarn
52
-
```
53
-
54
-
#### Run locally
55
-
56
-
```zsh
57
-
yarn start
58
-
```
59
-
60
-
#### Run Tests
61
-
62
-
```zsh
63
-
yarn test
64
-
```
65
-
66
-
## Backend App
67
-
68
-
To run the backend app locally all you need to do is build the container and run it alongside your app.
13
+
Your application is deployed to an AWS S3 bucket through CircleCi.
69
14
70
-
### Backend Repo
15
+
##Circle CI
71
16
72
-
The corresponding backend for this app is [zero-deployable-backend](https://github.com/commitdev/zero-deployable-backend)
17
+
Your repository comes with a end-to-end CI/CD pipeline, which includes the following steps:
Copy file name to clipboardExpand all lines: templates/docs/create-react-app.md
+14-19Lines changed: 14 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,14 +2,16 @@
2
2
3
3
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4
4
5
-
## Available Scripts
5
+
___
6
+
7
+
## Development
6
8
7
9
In the project directory, you can run:
8
10
9
11
### `yarn start`
10
12
11
13
Runs the app in the development mode.<br />
12
-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
14
+
Open [localhost](http://localhost:3000) to view it in the browser.
13
15
14
16
The page will reload if you make edits.<br />
15
17
You will also see any lint errors in the console.
@@ -31,40 +33,33 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
31
33
32
34
### `yarn eject`
33
35
34
-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
36
+
_**Note:** this is a one-way operation. Once you `eject`, you can’t go back!_
35
37
36
38
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37
39
38
40
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39
41
40
42
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41
43
44
+
___
45
+
42
46
## Learn More
43
47
44
48
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45
49
46
50
To learn React, check out the [React documentation](https://reactjs.org/).
47
51
48
-
### Code Splitting
49
-
50
-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
51
-
52
-
### Analyzing the Bundle Size
53
-
54
-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
55
-
56
-
### Making a Progressive Web App
57
52
58
-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
0 commit comments