Headless solution for a single branding website

Description

Headless solution for a single branding website that uses Drupal as a back-end system and Next.js as a front-end.

Table of Contents

• Installation and Configuration
• Web Accessibility
• Development and Contributing
• Deployment
• Technical Documentation
• Useful Documentation

Pre-requisites

• Node.js (v20.12.6 required)

Installing Node.js using NVM

For macOS and Linux:

1. Install nvm:

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
   # or
   wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

2. Install and use Node.js v20.12.6:

   nvm install 20.12.6
   nvm use 20.12.6

3. Verify installation:

   node -v  # Should output 'v20.12.6'

Git Repository Setup

git clone git@github.com:ffwagency/headless-poc-next.git
cd headless-poc-next
npm install

Configuration

.env File Setup

Create a .env.local in the root of your project with the following:

NEXT_PUBLIC_DRUPAL_BASE_URL=drupal_base_url
NEXT_IMAGE_DOMAIN=image_domain

DRUPAL_CLIENT_ID=drupal_client_id
DRUPAL_CLIENT_SECRET=drupal_client_secret
DRUPAL_PREVIEW_SECRET=drupal_preview_secret

NEXT_PUBLIC_DEFAULT_LANGUAGE=default_language
NEXT_GENERATE_FILES=true

Usage

Running the Development Server

npm run dev

Building for Production

npm run build
npm start

Tests and Lints

Running Tests

npm test

Running Lints

npm run lint

Web Accessibility Rules

Ensuring our project is accessible to all users, including those with disabilities, is a top priority. Below are specific rules and guidelines to follow to achieve web accessibility.

Web Accessibility Rules

Development and Contributing

Git workflow

We are using:

• Beginning of the project Git workflow
• Feature-based Git Workflow

Lead Developer(s)

• Kristiyan Velkov (JavaScript DKL)
• Email: kristiyan.velkov@ffw.com
• Nikola Bintev (Team Lead | AWS Certified Solutions Architect - Associate)
• Email: nikola.bintev@ffw.com

Deployment

Development Environment

Deploy locally or to a staging environment for testing.

Production Environment

Set up to handle real user traffic efficiently.

Technical Documentation

Links with Technical Documentation for This Project:

• Full project documentation.
• Project repository.

Useful Documentation

• Next.js Official Documentation
• React Official Documentation
• Getting Started with Docker
• Next.js for Drupal
• Lando Documentation
• Decoupled Drupal Documentation