Website

Note: This page is mirrored from the next-website-v2 README. Please make edits there.

This repository contains the scaffolding for DA’s new website, powered by Next.js, TypeScript & Strapi. For most information about contributing to DA (e.g. our dev process and asking for help), please refer first to the general contributing guide.

Technologies Used

Next.js - Frontend framework
Typescript - scripting language
Radix UI - component library
Tailwind.css CSS framework
npm - package manager
Prettier - code formatter (via the pretty-quick node module)
ESLint - Linting
Vercel - Production and deployment

Setup

Clone the repo

git clone https://github.com/distributeaid/next-website-v2.git

Install dependencies

This setup comes preconfigured with Next.js, TypeScript, Tailwind, and Next’s Incremental Static Regeneration.

To run a Next.js project you’ll need to install or update these dependencies:

Installation

Here are the steps to set up the project in your local dev environment:

Install Dependencies:

yarn install

Then run the development server to launch your app:

yarn dev

Open http://localhost:3000 with your browser to see the result. The page auto-updates as you edit the file.

Environment variables

In order to exercise local code using custom environment variables, you’ll need to add an .env.yarn file at the project root containing the relevant variables.

Coding Conventions / Best Practices

Avoid using raw #hexadecimal values. View /src/stylesheets/ or tailwind.config.ts to see color value names.
Use Radix UI’s component library and use tailwind CSS for supplementary styling.

Project Structure

We are using a Next project structure.

/public/ - Contains images and documents that are used in different pages or components.
/src/ - Most of the files you’ll be working with live inside the /src/ folder.
/src/app/ - Contains the main pages for routing, meaning /src/app/[foldername]/page.tsx would route to the /[foldername] page on the website.
src/app/api - Any server-side code should be sequestered in src/app/api; i.e. logic for the contact form.
/src/components/ - Each page is made up of multiple components that will be imported onto that specific page.
/src/data - Anything data-related should live in /src/data, rather than inline in components.

Running checks

To check types:

yarn check:types

To run the linter:

yarn lint

Check formatting:

yarn check:format
yarn format

To run tests:

yarn test

Server Management

Adding a New Admin User

To add a new admin user to one of the webservers:

SSH into the server
Terminal window
```
ssh your-username@server-address
```

Add new admin

sudo adduser new-username
sudo usermod -aG sudo new-username

Confirm it works
Terminal window
```
id new-username
```

Add to AllowUsers setting for ssh access

sudo vim /etc/ssh/sshd_config
sudo systemctl reload ssh

Add their public ssh key

sudo su - new-username
mkdir -p ~/.ssh && chmod 700 ~/.ssh && touch ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys
vim ./.ssh/authorized_keys
exit

(Optional) log out of the server
Terminal window
```
exit
```

Deploying the Website

To deploy the website on the staging or production server:

SSH into the server
Terminal window
```
ssh your-username@server-address
```
Change to the deploy user
Terminal window
```
sudo su - deploy
```

Update the relevant branch

cd ./next-website-v2/
git branch
git checkout main # or the branch you want
git pull
yarn install

Build and deploy the site

yarn build
pm2 list
pm2 restart 0 # or id of instance you want to restart

Visit the site to make sure it works.
Log out of the deploy user, and optionally the server
Terminal window
```
exit
exit
```