designaroni / designaroni-next

Repo for Designaroni front end built on Next JS

---

Environment Variables

• Copy env.example to .env.local
• For local development update vars to match localhost Strapi backend configuration HOSTNAME=localhost NEXT_PUBLIC_STRAPI_API_URL=http://$HOSTNAME:1337 NEXT_PUBLIC_IMAGES_DOMAIN=$HOSTNAME NEXT_PUBLIC_G_TAG_MEASUREMENT_ID=LOCALHOST

Test & Production environment specifics

• For both test and production environments on Vercel you will need to setup Production, Preview (and optionally if you are using a custom preview domain for your test branch Preview on test), environment variables hosted on Vercel.
  • As an example I am only currently using the following:

    • NEXT_PUBLIC_STRAPI_API_URL
      NEXT_PUBLIC_IMAGES_DOMAIN
      NEXT_PUBLIC_G_TAG_MEASUREMENT_ID
      

  • This project uses a Strapi headless cms backend hosted on Digital Ocean & AWS that serves a Graphql API to the frontend. As currently deployed the values for NEXT_PUBLIC_STRAPI_API_URL & NEXT_PUBLIC_IMAGES_DOMAIN relate specifically to the Strap test & production app URLs

---

Custom yarn commands for this project

local

Same command as dev used for local development to start and run the Next application. Used in parity with the local development command used to start designaroni-strapi

lint

Internally runs $ yarn lint:ts; yarn lint:js; yarn lint:scss

lint:js

Internally runs $ next lint to lint the project using Next linting configuration.

lint:scss

Internally runs $ yarn stylelint '**/*.scss' for linting based on the projects stylelint configuration

lint:ts

Internally runs tsc --noEmit to invoke the TypeScript compiler, linting based on the tsconfig.json configuration.

---

Getting Started

• Follow the steps over on the designaroni-strapi README to configure the local apps content & API
  • Start the local development version of Strapi with yarn local.
• Within this Next app, run yarn local to start the frontend application.

---

Coding style guide (WIP)

SCSS & CSS Modules

Overriding component utility classes in specialized components

• At times it is useful to override classes used in utility/layout components the following method can be used:
  • [class^="section"].aboutSection { /* ... */ }

---

🚀 Getting started with NextJs

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

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.