SIS Website

Getting Started

This website was created using Gatsby which is built on top of React. If you are not familiar with React, I have left a few links at the bottom under Learning that you can use to get started.

This website also uses SCSS and Typescript instead of CSS and Javascript. Resources to learn those are at the bottom of this README too.

If you feel confident enough in React, Typescript and SCSS, feel free to follow the instructions below.

1. Developing

   Please create and push your changes to a new branch with the name of what you plan to add/change. For example, if you are adding a new page for reviews, create a branch called new-reviews-page and work off that. Once you are done with all the changes you plan to make, create a pull request to merge with the dev branch.

   Do NOT push directly to main or dev.

   Install NodeJS and NPM

   Please note to install NodeJS version 16 for our current set of dependencies. NodeJS 18 (the latest LTS version) is unsupported.

   If you need to check which version you have:

   $ node -v

   If you have Node 16 and it's default, you're good to go for now (until/unless you accidentally update it, and things break).

   If you don't have Node, you can install the right version by going to this folder and getting the right installer (.pkg for Mac, .msi for Windows).

   If you have Node 18, consider installing Node Version Manager, nvm. There's already a .nvmrc file in the folder, so each time you cd into the folder, type nvm use and it'll switch your Node version.

   Setup and Running

   Run these commands to get started working on this repo:

   $ npm i
   $ npm run develop

   The website should then be running at http://localhost:8000

   Troubleshooting

   Do note that if, for some reason, assets are not showing, try restarting the node server. Otherwise, run the following command to clear the cache and rebuild everything:

   $ npm run clean
   $ npm run develop

   Do note that this requires you to have gastby-cli installed globally

2. Deploying

   Only the Webmaster should deploy any new changes. To anyone else, this section is irrelevant to you.

   To deploy your changes to https://swiftinsg.github.io/, just do this:

   $ npm run deploy

   Please also remember to commit and push your changes to main so the rest of us can see your changes.

Learning

HTML, CSS and Javascript:

• W3 Schools

React:

• Tutorial
• Documentation

Gatsby:

• Tutorial
• Documentation

Typescript:

• Tutorial (For those new to coding)
• Tutorial (For those that understand JS)
• React Typescript Cheatsheet

SCSS:

If you understand CSS well, you can probably skip this. SCSS is very similar to CSS. We do not use SASS in this website.

• Sass Basics
• Documentation

Remember, when in doubt, consult Google and Stack Overflow first.