/public-profile

Primary LanguageTypeScriptMIT LicenseMIT

React, Next.js, Material-UI, TypeScript Repository Template

An opinionated Github Repository Template I use for my "Go To" tech stack. This gives a great starting point for Next.js projects with a mix of essentials and niceties. To use, simply click [Use Template] from the Github Page.

The building of this template prior to 1.0 release is documented in my Hashnode series "Building a Next.js/TypeScript Github Template Repo"

Included

  • React
  • Next.js
  • TypeScript 3.9
  • Material-UI
  • ESLint with airbnb defaults
  • Jest with separation
  • Environment variable support
  • PWA support

Usage

To create a new repository using this project as a template, simply simply click [Use Template] from the Github Page or use this direct link.

Bugs or Suggestions? Found a bug or want to add a feature? Open an issue on Github.

Once your repository is created and you have checked out project, modify or remove the following files to suite your needs.

Personalization

  • package.json - Update with your project name, description, author, repo location, etc.
  • public/static/manifest.json - Update your application short_name and name.
  • pages/_document.tsx - Update your application name and description
  • src/theme/index.ts - Update your Material-UI theme to your specifications
  • pages/index.tsx and src/screens/IndexContent.tsx - Customize to your needs

Cleanup Boiler Plate

  • src/utils/ contains a simple module and tests that can be removed.
  • README.md Delete everything above this line and update the project name and description below

Project Name

This is the project description

Installation

Clone the project and cd into the working directory.

  • Create a .env.local providing the the following values:
// Customize this to your project's needs
  • To install dependencies, run npm install

Developing Locally

To run the application on your local machine for development (hot model reloading, etc), simply run:

npm run dev

To specify a specific port to run the application, set the PORT environment variable:

 PORT=4040 npm run dev

Production Build

To build a deployable production bundle:

npm run build

This will bundle assets into the .next folder.

Running Production Build Locally

To run the production build locally:

npm run start-local

This command pre-populates NODE_ENV and PORT to emulate running the application deployed. By default, the application will run on port 8080.

Deploying

Provide your deploy instructions here. Note: Hosting service must be able to run npm run start with the NODE_ENV=production and PORT environment variable.

Testing

Three test commands are provided.

Run integration tests (just tests ending in "integration.test.ts")

npm run integration

Run unit tests (not ending in "integration.test.ts")

npm run unit

Runs all tests and generates coverage report

npm run test

Linting

An ESLint report can be generated by running

npm run lint