WSO-React

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.

• Production Build: https://wso.williams.edu/
• Development Build: https://wso-dev.williams.edu/

Interested in the back-end instead? Head over to our backend wso-go repository.

Suggestions, issues, or bug reports?

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!

Contributing

1. Open an issue and discuss your planned change with the repository administrators. This is important to avoid any wasted effort if you choose an approach that is not encouraged by the admins.
2. Once the admins have approved your intended change, create a branch in the repository from master.
3. Make your modifications in the branch.
4. When you are ready, make a pull request and request for review from a admin.
5. Once the pull request has been approved, squash and merge it.
6. Congratulations! You're done!

Getting Started

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.

Development

Optional Installations: To aid in your development process, we also suggest installing the following:

• React Developer Tools (Chrome, Firefox)
• Redux DevTools
• Configuring Prettier to work with your editor. We have a pre-commit hook which automatically formats your code before commit so that the repo will have consistent formatting, but it is helpful to know how to configure Prettier to format your code on save so it looks nice as you're typing it up!
• Configuring ES-Lint to work with your editor. Like Prettier, we have a pre-commit hook to ensure that your code fits our standards, but unlike the Prettier hook, the commit will fail if there are errors, so it will help your development loop if it is configured with your editor.

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:

• Start by reading the section on contributing to find out the ways you can contribute to this repository. Contrary to popular belief, contributions need not come in the form of code. Fixing typos, creating issues for bugs, adding comments, suggesting tutorials, and helping out the community are valued ways of contributing.
• If you're interested in learning more about React and Redux, we recommend this tutorial.
• Look out for issues labelled as 'good first issue' here. These issues are usually what we have deemed to be great places to get your feet wet.

Available Scripts

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.