This repository contains all the front-end code to the Williams Student Online web-app. Core technologies include React (bootstrapped with Create React App), Redux, and Router5.
Interested in the back-end instead? Head over to our backend wso-go repository.
We would love to hear from you and discuss them. File an issue here with one of the templates, and our developers will get back to you shortly!
master
.1) Check for your Node version
$ node -v
If the above command results in an error, download the latest Node version here.
2) Check for your Yarn version
$ yarn -v
If the above command results in an error, download the latest Yarn version here.
3) Clone the repo into your working directory
$ git clone https://github.com/WilliamsStudentsOnline/wso-react.git
or
$ git clone git@github.com:WilliamsStudentsOnline/wso-react.git
4) Install the necessary dependencies
$ yarn
You should be all set! To get started, run
$ yarn start
to launch a development build, which includes Hot Module Reload(HMR), where changes you make will be instantly reflected without having to restart the server. Open http://localhost:3000 to view it in the browser.
5) Communicating with the Backend
While we've set up the React side of things, we need to set up the backend to allow our client to get the information from a local server. To do so, set up the backend as per the instructions in the wso-go repository, and run the wso-go
server alongside the React development server at yarn start
.
The development server is set to communicate to the backend via a proxy, allowing all HTTP requests can thus be made to /path/to/endpoint
without further settings.
Optional Installations: To aid in your development process, we also suggest installing the following:
Styling Styling is currently done via vanilla CSS, although we will likely be moving to a React component library soon (see issue #2).
Where to begin:
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 analyze
Analyzes the bundle size of the build - useful to understand how the bundle size changed after your modifications.