Skip to content

CSUA/csua-website

Repository files navigation

CSUA Website

Featuring the horrors of Node.js

Maintainer Guide

Contribution Process

  • Make sure you have push access to the repo first. Email [email protected] 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)
  • 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

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

Releases

No releases published

Packages

No packages published

Languages