Skip to content

Latest commit

 

History

History
236 lines (152 loc) · 5.45 KB

DEVELOPMENT.md

File metadata and controls

236 lines (152 loc) · 5.45 KB
Raw

Development

Table of Contents

Prerequisites

Before you get started, you will need to have the following tools installed on your machine:

  • Node.js (version 12 or later)
  • pnpm (version 5 or later) or npm or yarn (version 6 or later)
  • Git (optional, but recommended for version control)

This repository includes a list of suggested VS Code extensions. It's a good idea to use VS Code and accept its suggestion to install them, as they'll help with development.

Getting Started

Configuration

The project uses environmental variables for configuration. You can set the environmental variables in a .env file in the root directory of the project. The .env file should contain key-value pairs in the following format:

  • NEXT_PUBLIC_SITE_URL (required): The URL of the frontend App of the project.

Adding a new environmental variable requires a zod schema update in the env folder and a new entry in the schema.js file in the serverSchema variable or clientSchema variable.

Installing the dependencies

After you have set the environmental variables in the .env file, you can run the project locally by

git clone https://github.com/timelessco/next-ts-app
cd next-ts-app
pnpm install

This will download and install all the required dependencies for the project.

Running the project locally

pnpm dev

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

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

Building the project

You can use the below command to build the production-ready version of the project. This will create a .next directory with the compiled code and static assets.

pnpm build

Run the above built application locally using

pnpm start

Deploying the project

Guide on how to deploy Next.js to various hosting providers.

More DX scripts

Check for all the below errors in one command using Turbo Repo

pnpm lint

AutoFix all the linting errors in one command using Turbo Repo

pnpm format

Prettier

Prettier is used to format code. It should be applied automatically when you save files in VS Code or make a Git commit.

Check the formatting errors

pnpm lint:prettier

AutoFix the formatting errors

pnpm format:prettier

This package includes several forms of linting to enforce consistent code quality and styling. Each should be shown in VS Code, and can be run manually on the command-line:

Eslint

Extends all the necessary rulesets from eslint-config-canonical for the project that lints JavaScript and TypeScript source files

Check for the linting errors

pnpm lint:eslint

AutoFix the linting errors

pnpm format:eslint

Stylelint

(Stylelint): Checks all css files

Check the css linting errors

pnpm lint:css

AutoFix the css linting errors

pnpm format:css

Markdown

(Markdownlint): Checks all Markdown files

Check the markdown linting errors

pnpm lint:md

AutoFix the markdown linting errors

pnpm format:md

Check Types

(TypeScript): Checks all TypeScript files

Check TypeScript types

pnpm lint:types

Check unused dependencies, exports & types

(knip): Checks all unused dependencies, exports & types

Check the spelling errors

pnpm lint:knip

Check Spelling

(cspell): Spell checks across all source files

Check the spelling errors

pnpm lint:spelling

Populate project-words.txt with the words that are not in the dictionary & fix

pnpm populate:dictionary

Check package.json

(npm-package-json-lint): Lints the package.json file

Check the package.json linting errors

pnpm lint:package-json

Test

Run the test suite

pnpm test

Contributions

(all-contributors): ✨ Recognize all contributors, not just the ones who push code ✨

Add new contributors

pnpm contributors:add

Generate the contributors list

pnpm contributors:generate