The frontend portion of the Sheriff Scheduling app (code named Shuber).
- Getting Started
- Technology Stack Used
- Project Status
- Documentation
- Security
- Available Scripts
- Debugging in the Editor
- Folder Structure
- Deployment
- Getting help or issues
- How to Contribute
- Third Party Libraries Used
- License
-
Developer Workstation Requirements/Setup
-
Clone Repo
-
Run
yarn
ornpm install
in the root of the project to install dependencies -
Run
yarn start
ornpm start
to start up the development server- This should automatically open up a browser to http://localhost:3000
See Available Scripts for more info
This project was bootstrapped with Create React App.
todo
Todo GitHub Pages (https://guides.github.com/features/pages/) are a neat way to document you application/project.
Authentication, Authorization, Policies, etc
I have started using Yarn for most of my packaging and script running needs. However, you can also use npm if your inclined. The following scripts are described from the yarn perspective.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Starts the Storybook dev server which operates on http://localhost:6006
You would need to have the latest version of VS Code and VS Code Chrome Debugger Extension installed.
The launch.json
is already configured with a launch task that allows you to launch chrome in a debugging capacity and debug through code within the editor.
Start your app by running yarn start
, and start debugging in VS Code by pressing F5
or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
.vscode/ - VSCode Configuration
config/ - React/Babel/Typescript configuration
└── jest - Jest testing configuration / transforms
docs/ - Project Documentation
└── images
└── icons
openshift/ - OpenShift-specific files
├── scripts - helper scripts
└── templates - application templates
config/ - Public HTML Assets
scripts/ - Build, dev and test scripts
src/
└── app - Root of the front end application
└── api - temporary location for mock api
└── components - basic components
└── containers - container components (i.e using redux/state)
└── infrastructure - Utilities
└── modules - modules represent domain specific components, containers and state
└── sheriffs - deals with sheriffs
└── tasks - deals with sheriff tasks
└── pages - pages that can be accessed through navigation
└── store - the redux store and root reducer setup
└── libs - A place for holding additional typescript definition (d.ts) files
└── server - Eventual resting place of a server for the frontend (if we create one)
- In this projet we do not use
index.ts
files as they are another thing for developers to remember to do
when importing many things from an external library, place each import on its own line; this makes imports easier to comment out when debugging / testing an idea.
import {
Glyphicon,
Button,
Image
} from 'react-bootstrap'
vs
import {Glyphicon, Button, Image} from 'react-bootstrap'
Components are defined as visual pieces that do not
See OpenShift Readme
This project supports a superset of the latest JavaScript standard.
In addition to ES6 syntax features, it also supports:
- Exponentiation Operator (ES2016).
- Async/await (ES2017).
- Object Rest/Spread Properties (stage 3 proposal).
- Dynamic import() (stage 3 proposal)
- Class Fields and Static Properties (stage 2 proposal).
- JSX and Flow syntax.
Learn more about different proposal stages.
While we recommend to use experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide codemods if any of these proposals change in the future.
Note that the project only includes a few ES6 polyfills:
Object.assign()
viaobject-assign
.Promise
viapromise
.fetch()
viawhatwg-fetch
.
If you use any other ES6+ features that need runtime support (such as Array.from()
or Symbol
), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.
To report bugs/issues/feature requests, please file an issue.
If you would like to contribute, please see our CONTRIBUTING guidelines.
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Todo Put links to third party libraries and licenses here
Copyright 2016 Province of British Columbia
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.