/NextJS-Docker-Base-Template

A base template that includes several common tools and frameworks for developing a modern-day full-stack react web application

Primary LanguageJavaScript

NextJS-Docker-Base-Template

A base template that includes several common tools and frameworks for developing a modern-day full-stack react web application.

Includes a dockerfile for containerized development and/or deployment.

Summary

This empty project includes frameworks that utilize the best practices for modern-day SPA (Single Page Applications) enforcing techniques such as code splitting, SSR (server-side rendering), material design, modular styles, state management, typing with typescript, prettier linting, unit testing, and more.

Any React developer can just dive in and start writing components! (no more wasting set up time or stressing over config =])

Happy Coding!!!

Frameworks Included

Major Dependencies worth mentioning

Dev Dependencies worth mentioning

Installation

If you already have Node.js installed, and would like to continue to develop on your local machine, then skip to Local Development section.

Otherwise, the other option will be to install Docker, so that we can run things in an isolated docker container (aka isolated environment).

Local Development

npm i
npm run dev

This will start server at http://localhost:3000.

See package.json for an exhaustive list of commands.

Docker Commands

Build container image

# build image w/ local config
docker build -f docker/local.dockerfile -t my-nextjs-project .

# build image w/ dev config
docker build -f docker/dev.dockerfile -t my-nextjs-project .

# build image w/ prod config
docker build -f docker/prod.dockerfile -t my-nextjs-project .

Run container image

docker run --name=my-nextjs-project --rm -p 4000:3000 my-nextjs-project

Now you should be able to access via http://localhost:4000

SSH into container

docker exec -it my-nextjs-project /bin/zsh

Todo

  • Install zsh + powerlevel10k theme
    • For pretty terminal when ssh-ing to container
  • Split configs for dev / prod environments
  • Wire up webpack bundle analyzer