renhyl / vite-reactjs-ts

ViteJS - ReactJS - TypeScript with PNPM for Docker.

🟡 Mission Statment 🟡

🥰 Docker'ized dev project, that just works, has 0 configuration, offers hot reloading, uses best standards and pratices*

• ViteJS | Why ViteJS? repo: https://github.com/vitejs/vite

Vite.js is a rapid development tool for modern web projects. It focuses on speed and performance by improving the development experience. Vite uses native browser ES imports to enable support for modern browsers without a build process.

• ReactJS, repo: https://github.com/facebook/react

A JavaScript library for building user interfaces

• TypeScript, repo: https://github.com/microsoft/TypeScript

TypeScript is JavaScript with syntax for types.

• PNPM, repo: https://github.com/pnpm/pnpm

Fast, disk space efficient package manager.

• ESLint, repo: https://github.com/eslint/eslint

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

• VSCode Dev Containers (optional)

The Dev Containers extension lets you use a Docker container as a full-featured development environment.

🟡 Key Notes 🟡

• Dockerfile that utilizes Multi Stage build process; ref: https://docs.docker.com/build/building/multi-stage/

• VSCode Dev Containers support (optional); ref: https://code.visualstudio.com/docs/devcontainers/containers

• PNPM rather than NPM; ref: https://pnpm.io/

• ESLint

• Wisdom from Docker Captain Bret Fisher Node.js + Docker good defaults: https://github.com/BretFisher/node-docker-good-defaults

NOTE: you don't have to touch /node_modules on the host, Docker container will handle install and update and respect any overrides. If you don't use VSCode's "Dev Container" to develop then all you need to do after updating modules/package.json is rebuild image && restart with docker-compose up --build

🟡 Get Started 🟡

VSCode users:

git clone [email protected]:renhyl/vite-reactjs-ts.git

open dir in VSCode and "Dev Containers: Reopen in Container" from Command Palette

You can develop by opening your VSCode and launching/connecting to Dev Container. (Requires VSCode extension "Dev Containers", "Remote Development")

For non-VSCode users:

You can run the container from your project's root dir with:

docker run -it --rm -v ${PWD}:/app -v /app/node_modules -p 5173:5173 damianboni/vite:react-ts

alternatively you can:

docker-compose up --build

ensure you always use --build to sync/update /node_modules

---

You should be able to browse the homepage of the project by navigating to: http://localhost:5173/

License: MIT