ADSN 24 Static Webpage

https://curtinids.github.io/ADSN-2024/

This is a Next.js project bootstrapped with create-next-app.

Useful "quick start" learning materials:

• React Foundations
• Next.js

Table of contents

• ADSN 24 Static Webpage
  • Table of contents
  • Getting Started
  • Setup Google Maps API keys
    • Development environment
    • Production environment
  • Deploy to GitHub pages
    • Support images on GitHub pages with a static Next.js project

Getting Started

Install Node locally, the version used in the project is 20 (or latest LTS). Using nvm to manage different versions of Node is recommended:

# Install NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Install Node v20 (latest LTS)
nvm install --lts

# Use Node v20 (latest LTS)
nvm use --lts

Next.js devs recommend to use pnpm as package manager:

npm install -g pnpm

NextUI is used for UI components. This extra step is required for pnpm:

# Example location of `.pnpmrc` if using `nvm`. For Linux:
sudo gedit ~/.nvm/.npmrc

# or for Mac:
nano ~/.nvm/.npmrc

# Add this line and save
public-hoist-pattern[]=*@nextui-org/*

Install the project dependencies:

pnpm install

Run the development server:

pnpm run dev

Open http://localhost:3000/ADSN-2024 with your browser to see the result. Note: Google API keys needs to be set in order to make the embedded maps works. See this paragraph.

Setup Google Maps API keys

This repo uses Maps Embed API for showing the locations maps. They are free and with unlimited usage but they require an API key created.

Development environment

This step is needed for showing Google Maps in the local development environment.

Create a file a name .env at the top directory level of the repository. You can use .env.example as template or paste this:

GOOGLE_MAPS_API_KEY="<your-google-embed-maps-api-key>"

Get a Google Maps API key follow the instructions here.

Optionally, you can restrict them to only Maps Embed API.

Production environment

Dr. Paul Hancock created the API keys for the production environment and are stored as GOOGLE_MAPS_API_KEYS in the repository's secrets.

These keys have these security features enabled:

• restricted for Maps Embedded API
• restricted for https://curtinids.github.io/ADSN-2024/ domain

Deploy to GitHub pages

The project needs to be compiled as a static webpage for working on GitHub Pages. It can be done locally, the results will be created inside out directory, which then needs to be uploaded to GitHub pages:

pnpm next build

These steps are actually done automatically with GitHub Actions: every time a commit or pull request is merged, the new code is deployed to the GitHub Page. For details see the implementation of the deploy GitHub action: nextjs.yml

Support images on GitHub pages with a static Next.js project

The following adaptations are needed in order to make images work on GitHub Pages:

• basePath needs to be added in next.config.mjs
• add unoptimized argument to all Images in next.config.mjs
• every Image in the code should have basePath prefixed in their src value. (Example: <Image src="/ADSN-2024/image.svg" />)

As a result of this, when developing locally the home page will need basePath prefixed: http://localhost:3000/ADSN-2024