Development Onboarding

Onboarding

This is the onboarding for members who are new to the UC Berkeley IEEE web committee. This walkthrough will get a local version of ieee.berkeley.edu running on your local machine, and then will give you a few simple tasks to help you get accustomed with the web committee’s developmental workflow.

Pre-requirements:

• sudo or admin access (for setup)

• The ability to work with some sort of a terminal

• Github account (send your username to the committee director(s))

Setup

1. Install Node.js: https://nodejs.org/en/. Node is a server framework that is written in Javascript.

2. Clone the Github repository: https://github.com/IEEEBerkeley/react-ieee. There are lots of online resources to learn Git, so if you aren't familiar with it try looking for resources online.

3. Once you clone the repository, navigate in a terminal to the directory, i.e. "react-ieee". Once inside, type "npm install" and press enter. Inside the project you just downloaded is a "package.json" file, which tells Node all of the libraries we are using. The npm install command downloads the right versions of these libraries for you.

4. Type in "npm start" and press enter. This should open a local version of the site in your browser, i.e. "http://localhost:3000"!

Setup development workflow

These steps are our development workflow. You should do this every time you want to make changes to our repository.

command	description
git pull origin master	Update your local repo version
git checkout -b my_first_branch	Create a new branch with a descriptive name
Now do whatever it is you need to do, from within my_first_branch.	All changes should be within this new branch
git commit	Commit all your changes. Make sure everything still works. Take screenshots where needed.
git push origin my_first_branch	Push your local changes within your branch.
Create a pull request.	Make sure to write a descriptive title, description, and include screenshots where needed. Do not merge your own pull request.
Delete your branch after the pull request has been merged.

Explore

In this section, we explore some parts the repository together. You should be on your own branch here, just in case something gets changed here.

command	description
ls	Notice how there are two directories, client and node_modules. node_modules is where npm will install packages to client is where our website source code is
cd client ls	We see src, public, and node_modules.
cd public
Open index.html in your preferred text editor	This source is the exact same as if you were to view the raw page source of ieee.berkeley.edu (in chrome: "view-source:https://ieee.berkeley.edu//") Line 29: <script src="../src/index.js"></script> tells us to look somewhere else
cd ../src ls	Lots of *.js files!
Open App.js, Main.js, and index.js	Welcome to React This walkthrough is not a React tutorial, so feel free to look through some of these links to learn how these files are relevant to each other, and so on: https://reacttraining.com/react-router/ https://www.npmjs.com/package/react-router-dom We also have a react textbook if you’re interested in learning more
cd assets	This is where all images, CSS, resources, etc, live We’ll explore this soon!
cd ../views	Now we’re into the juice of our website! All the react files are here

Self Exploration (Challenges)

Do the following on your own branch (refer to the previous development workflow section). This section challenges you with a few tasks, to let you further self explore the repository!

1. Edit/add an officer image or links (https://ieee.berkeley.edu/about/leadership)

2. Edit the homepage text (https://ieee.berkeley.edu/)

3. Add an image to the banner (https://ieee.berkeley.edu/)

4. Add another sponsor to the sponsor page (https://ieee.berkeley.edu/industry/sponsors)

Solutions:

1. Edit/add an officer image or links (https://ieee.berkeley.edu/about/leadership)

   1. **Solution: **

   2. Add to the Json file at react-ieee/client/src/views/about/OfficerList.json

   3. If uploading a new icon, add the icon via fontello at react-ieee/client/src/assets/fonts/fontello

2. Edit the homepage text (https://ieee.berkeley.edu/)

   4. Solution:

   5. Edit html in react-ieee/client/src/views/Home.js

3. Add an image to the banner (https://ieee.berkeley.edu/)

   6. Solution:

   7. Edit react-ieee/client/src/views/slides.js, which contains the slick carousel. Images are in react-ieee/client/src/assets/

   8. They are added to the home page in react-ieee/client/src/views/Home.js

4. Add another sponsor to the sponsor page (https://ieee.berkeley.edu/industry/sponsors)

   9. Solution:

   10. The sponsor information is in react-ieee/tree/master/client/src/views/industry/