Installation
- First you will need to create a new firebase app, keep track of the values generated by the firebase app as you will need these in a later step
- Next ensure that you have the latest gcloud SDK installed
- Once that has been installed you will need to initialize the SDK, to do so run the following: (see more)
gcloud init
- If you did not select a project in the previous step, set it now to the firebase project ID
gcloud config set project PROJECT_ID
- Lastly either copy the firebase credentials directly into the
setup.sh
file or follow the steps below to use google secrets manager
Secrets Manager (Optional)
NOTE: You will need to do the following for each of the following keys corresponding to the values from firebase:
- firebase-api-key
- firebase-sender-id
- firebase-app-id
- Navigate to Google Secret Manager: https://console.cloud.google.com/security/secret-manager
- Click the "Create Secret" button
- Input one of the names above as the name
- Set the "Secret Value" to the value provided by firebase
- Click "Create Secret" to finish creating the secret and repeat to add the remaining firebase secrets
Running the Project
- Setup the environment and install dependencies
./setup.sh
- Start the server
npm start
All of the application code lives in the app/
folder. Each of the parts of the application is divided by the function it provides within the app. Below is an explanation of each component of the application
The application entrypoint is broken up into several parts, the first for local development to enable auto-reloading the browser and the remaining to enable all other functionality.
.
├── src/
│ ├── app/
│ │ ├── components/
│ │ ├── containers/
│ │ ├── navigation/
│ │ ├── screens/
│ │ ├── state/
│ │ └── utils/
│ │ ├── index.jsx
│ │ ├── root.jsx
│ │ ├── router.jsx
│ │ ├── styles.js
│ ├── data/
│ └── web/
├── webpack/
├── README.md
├── package-lock.json
├── package.json
└── setup.sh
Entrypoint
- The
root.jsx
file enables livereload features and will only have an effect on developing the app locally - The
index.jsx
file serves as the entrypoint to the application and loads all other components through the router - The
router.jsx
file creates the browser router and loads in all of the components of the app by wrapping each screen component in a route component - The
styles.js
file defines any global JSS styles used in the app
Components
Contains all of the presentational components used in the application
Containers
Contains components that may do some sort of data-fetching that does not belong to a single screen or feature.
Navigation
Contains any routing components
Screens
Each of the routes in the application has a screen associated which will initialize the state of that screen by fetching any data from the API and setting any local state accordingly
State
This is where any application state will live including details about the user.
Utils
This folder contains any shared logic that should be used by either the state manager or by a component for formatting purposes.
- The
firebase.js
file creates a firebase application using the environment variables for the specific firebase app - The
theme.js
file defines the Material UI theme used in the app
All of the setup for developing and deploying the application exists either in the webpack/
folder or in the root folder. Below is an explanation of the function of each:
- .babelrc: Configures how to transpile the newer versions of JavaScript (ES6+) into code that will run in any browser
- .env: This file is generated by the setup script and provides configuration settings and secrets through environment variables
- .eslintrc.js: Sets how to lint the project, use this file to change the rules around writing JavaScript
- .gitignore: Ignore file
- .prettierignore: Ignores node_modules so that prettier doesnt complain
- .prettierrc: Configures how to auto-format code in the project
- package-lock.json: Dependency lock
- package.json: Configure dependencies and any scripts that will be used including the startup script
- setup.sh: Setup script to configure the environment and load secrets
Webpack
All webpack configuration lives in the webpack/
folder and is split up based on environment with a common configuration. Aliasing and transpilation rules as well as the application entrypoint are defined in the webpack.common.js
file, while development server setup is in the webpack.dev.js
file and bundle optimizations are done in webpack.prod.js
src
There are 3 folders in the source folder related to development:
data/
: Defines any test data to use while building the appweb/
: Contains theindex.html
and any images or other static assets that will be used