Skip to content
No description or website provided.
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
static
.babelrc
.eslintrc.json
.gitignore
README.md
csua-website-webpack.service
csua-website.service
env_setup.sh
package.json
server.js
sslServer.js
testServer.js
webpack.config.js

README.md

CSUA Website

Featuring the horrors of Node.js

Maintainer Guide

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)
  • 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
You can’t perform that action at this time.