CSUA Website

Featuring the horrors of Node.js

Maintainer Guide

• Go to https://www.csua.berkeley.edu:8080/admin/ to edit officer/sponsor/pb/event data!
• Only a few things left to update in ./static/data

Contribution Process

• Make sure you have push access to the repo first. Email vp@csua.berkeley.edu or message someone on #root-staff on slack to get access.
• Navigate to where you want to clone the website. Clone it, get into it, make a new branch, make changes, push that branch, and create a pull request for that branch. For example,
  • git clone https://github.com/CSUA/csua-website clones the website to your local machine
  • cd csua-website to navigate to the project directory
  • git checkout -B BRANCH_NAME: creates a new branch named BRANCH_NAME and checks it out (switches to it)
    • Choose a branch name like dev-caleb or the name of the feature you are working on
  • Make changes and commit them, e.g.
    • touch documentation.txt
    • git add documentation.txt
    • git commit -m "I added documentation." or just git commit
    • or any other series of changes
  • git push --set-upstream origin BRANCH_NAME: if you try pushing without setting upstream, it'll tell you do git gud and do this
  • Now create a pull request (PR) from your branch to the dev branch on Github
    • When the dev branch is tested and stable, a member of root staff will merge it with prod and deploy it on the CSUA server

Setup Dev Site on Local Machine

• Install the latest version of Node and NPM (currently Node 8)
  • On Debian/Ubuntu, install NVM (Node Version Manager) as per https://github.com/creationix/nvm#installation after which you can nvm install node
  • Or just download the latest binaries from Node's website
• Navigate to project directory
• npm install to install dependencies
• webpack -p or node node_modules/webpack/bin/webpack.js will bundle together website assets to be deployed
  • Adding the watch -w flag to that command lets you run it as a background service to regenerate the deploy/ folder when any files are changed
• node deploy/testServerBundle.js to start the server at http://localhost:8081/

Developer Guide (Frontend) AKA How 2 edit React site

• Nonexistant
• Please write documentation here
• https://www.youtube.com/watch?v=nnsm2UBH8qE
• You probably want to edit the subfolders of src/Pages
• Remember to include your new scss files in src/Pages/style.scss

Source Tree

• deploy/ - generated by running webpack node node_modules/webpack/bin/webpack.js
  • serverBundle.js - run with node for production server
  • testServerBundle.js - run with node for dev server
• node_modules/ - all the node dependencies https://i.redd.it/tfugj4n3l6ez.png
• public/ - (compiled) static assets for the site
• src/ - all the source code and logic for the app
  • Pages/ - the different pages of the React app
    • Officers/ - contains the jsx to render the officer page
      • _OfficerCreator.jsx - turns officer data into the pretty cards with officer faces
      • Officers.jsx - the skeleton around the officer cards
    • Pages.jsx - Routing info on how pages are displayed (What's the difference between this and static/structure/)
  • App.jsx - main app javascript logic
  • ClientApp.js - nests into
  • index.html - the root of it all
• static/ - configs for data on the site
  • data/ - edit the files in here to change the data displayed on site
  • structure/ - this contains the urls and routes for the React app
• package.json - lists all the necessary dependencies to be installed with npm install
• server.js - connect to this server with UNIX sockets
• sslServer.js - isn't used anymore, but this code runs the site on HTTPS
• testServer.js - gets compiled to deploy/ but edit this file to specify what port this opens the local server on
• webpack.config.js - details how webpack should compile assets

Root Staff Guide (Deploying/Systems)

• This repo is located in /webserver/csua-website on production (services.csua.berkeley.edu)
• There are two systemd services that make this work, both in /etc/systemd/system (the files in this repo are just copies)
  • csua-website.service: Runs the node server as root, which binds to /run/node/node.sock
  • csua-website-webpack.service: Runs webpack in watch mode, which is used to update the resources and bundle files with zero downtime (supposedly)
• Requests to https://www.csua.berkeley.edu are ProxyPass'ed by Apache to this server
• Apache config is in /etc/apache2/sites-available/csua-website.conf
• Check on status using some of these commands:
  • sudo systemctl status csua-website
  • sudo systemctl status csua-website-webpack
  • sudo journalctl -u csua-website
    • Press "G" to go to the bottom
  • sudo journalctl -u csua-website-webpack