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.
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!!!
- React (v16)
- Next.js
- Material UI
- React Testing Library + Jest
- Redux
- Sass / SCSS (for styling)
- Typescript
- Webpack Bundle Analyzer
- Prettier Linter
- Redux Dev Tools Extension
- Zsh + Powerlevel10k theme (docker container)
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).
npm i
npm run devThis will start server at http://localhost:3000.
See package.json for an exhaustive list of 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-projectNow you should be able to access via http://localhost:4000
SSH into container
docker exec -it my-nextjs-project /bin/zsh- Install zsh + powerlevel10k theme
- For pretty terminal when ssh-ing to container
- Split configs for dev / prod environments
- Wire up webpack bundle analyzer