A Vite + GraphQL + Typescript frontend boilerplate using Feature-Sliced Design as project architecture methodology.

Table of Contents

• Overview
  • Why Choose LiteFront?
  • Use Cases
• Tech Stack
• Perfect Pairing with LiteEnd
• Get Started
  • One-liner
  • Step by Step
  • Production Build
• Types Generation
• License
• Contributing

Overview

LiteFront is a lightweight and scalable frontend boilerplate designed for building fast, efficient, and maintainable web applications. It integrates Vite for fast builds, GraphQL for data querying, and TypeScript for type safety, making it ideal for modern web development.

Why Choose LiteFront?

• Scalability: Feature-Sliced Design ensures your project stays organized as it grows.
• Developer Efficiency: Fast development cycles with Vite's hot module replacement.
• Maintainability: Built-in tooling for code quality and automated testing.

Use Cases

LiteFront is perfect for building single-page applications (SPAs), dashboards, and complex web apps that require a maintainable architecture.

• ESLint, Prettier, and Stylelint are used to ensure code quality and maintainability.
• SCSS modules are used to style the application.
• Docker is used to build and run the application in development and production.
• Caddy is used to serve the application in production.
• Vitest is used to test the application in development and production.
• Playwright is used to test the application in development and production.
• Husky is used to automatically run linting and formatting on code changes.

Perfect Pairing with LiteEnd

This LiteFront boilerplate is best suited for use with LiteEnd, as they are designed to work seamlessly together. LiteEnd provides a backend that integrates smoothly with LiteFront via GraphQL and TypeScript, enabling a cohesive full-stack development experience.

Get started

One-liner:

• npx degit uxname/litefront my-app && cd my-app && git init && git add . && git commit -m "Initial commit" && npm install && cp .env.example .env && npm run gen && npm run start:dev

Step by step:

• npx degit uxname/litefront my-app
• cd my-app
• git init && git add . && git commit -m "Initial commit"
• npm install
• cp .env.example .env
• Edit .env
• npm run gen
• npm run start:dev

Production build:

• npm run build
• npm start:prod

Types generation

Run npm run gen after every GraphQL API Schema changed or after ./graphql/*.graphql files are modified

License

LiteFront is licensed under the MIT License.

Contributing

Contributions are welcome! Please submit a pull request with your changes.

I hope this rewritten version meets your requirements! Let me know if you need any further changes.