Shuber Frontend
The frontend portion of the Sheriff Scheduling app (code named Shuber).
Table of Contents
- 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
Getting Started
-
Developer Workstation Requirements/Setup
-
Clone Repo
-
Run
yarnornpm installin the root of the project to install dependencies -
Run
yarn startornpm startto start up the development server- This should automatically open up a browser to http://localhost:3000
See Available Scripts for more info
Technology Stack Used
This project was bootstrapped with Create React App.
Project Status
todo
Documnentation
Todo GitHub Pages (https://guides.github.com/features/pages/) are a neat way to document you application/project.
Security
Authentication, Authorization, Policies, etc
Available Scripts
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:
yarn start
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.
yarn test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
yarn build
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.
yarn storybook
Starts the Storybook dev server which operates on http://localhost:6006
Debugging in the Editor
Visual Studio Code
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.
Folder Structure
.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)
Conventions
No Index.ts files
- In this projet we do not use
index.tsfiles as they are another thing for developers to remember to do
Imports
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
Components are defined as visual pieces that do not
OpenShift Deployment
See OpenShift Readme
Supported Language Features and Polyfills
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.Promiseviapromise.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.
Getting Help or Reporting an Issue
To report bugs/issues/feature requests, please file an issue.
How to Contribute
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.
Third-Party Libraries
Todo Put links to third party libraries and licenses here
License
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.