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. This guide contains other information specific to contributing to this repo.

Table of Contents

• Technologies Used
• Setup
• Installation
• Coding Conventions / Best Practices
• Project Structure
• Running Checks
• Server Management
  • Adding a New Admin User
  • Deploying the Website

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 this 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:

• Node.js version >=20.0.0 <=22.22.0
• Yarn >= 4.4.0

Installation

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

1. Install Dependencies:

- yarn install

2. Then run the development server to launch your app:

yarn dev

3. 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:

1. SSH into the server

   ssh your-username@server-address

2. Add new admin

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

3. Confirm it works

    id new-username

4. Add to AllowUsers setting for ssh access

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

5. 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

6. (Optional) log out of the server

   exit

Deploying the Website

To deploy the website on the staging or production server:

1. SSH into the server

   ssh your-username@server-address

2. Change to the deploy user

   sudo su - deploy

3. Update the relevant branch

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

4. Build and deploy the site

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

5. Visit the site to make sure it works.

6. Log out of the deploy user, and optionally the server

   exit
   exit

License

This project is licensed under AGPL.