Webpack Three JS — Template

This boilerplate starter template is the ultimate solution to help you getting started on your project in no time, without the hassle of setting up and configuring your environment from scratch each time you start developing.
It's ideal for front-end engineers who want to build modern, fast and reliable webgl web applications with the latest cutting edge technologies such as Three.JS, GLSL, JavaScript, TailwindCSS, Webpack, ESLint, Prettier, Husky and much more!

💻 Getting started

Prerequisites:

• JavaScript runtime [node.js][node];
• (OPTIONAL) Alternative package manager:
  • [PNPM][pnpm] npm install --global pnpm
    or
  • [Yarn][yarn] npm install --global yarn

Start developing:

• Get the repository:
  • click "Use this template"   or   "Fork" button
    alternately
  • clone the repository through your terminal:
    git clone https://github.com/doinel1a/webpack-three-js YOUR-PROJECT-NAME;
• Open your terminal or code editor to the path your project is located, and run:

  	NPM	PNPM	Yarn
  To install the dependencies	npm install	pnpm install	yarn install
  To run the development server	npm run dev	pnpm dev	yarn dev
  To build your app for production	npm run build	pnpm build	yarn build
  To preview your production optimized app	npm run preview	pnpm preview	yarn preview

Back to ⬆️

---

🔋 Features

This repository comes 🔋 packed with:

• Three.JS: A JavaScript library built on top of WebGL that provides an abstraction layer for rendering interactive 3D and 2D scenes in the web browser;
• TailwindCSS: A utility-first CSS framework that provides predefined classes for common styles and layout patterns, allowing quick styling without writing custom CSS;
• SASS: A CSS preprocessor that adds features such as variables, nesting, and mixins to CSS, making it easier to write and maintain large CSS codebases;
• PostCSS: A tool for transforming CSS with JavaScript plugins, allowing to add new features to CSS and improve the development process;
• Fontawesome: A library with over 5000 free icons that can be easily customized and used in web applications;
• Playwright: A library for automating web browser interactions, allowing the writing of end-to-end tests and perform browser automation tasks;
• Webpack: A build tool and development server that provides fast and efficient development and production builds for modern web applications;

And with tools that enhance the development experience:

• ESLint: A tool for enforcing coding standards and identifying potential errors in the code;
• Prettier: A code formatter that automatically formats code to conform to a consistent style, making it easier to read and maintain;
• Husky: A Git hook manager that allows easy set up and configuration of Git hooks, which are scripts that run at certain points in the Git workflow;
• Commitlint: A tool for enforcing commit message conventions in Git repositories, helping to ensure consistent and informative commit messages;

Back to ⬆️

---

🔃 Versions

This repository comes configured with 2 of the industry standards for development tools: Webpack and Vite.
Both tools support SWC (Speedy Web Compiler), a Rust-based compiler; Vite is optimized for it out of the box.

Vite (SWC compiler)

Is a simple and fast solution thanks to it's "zero-config" approach which offers a smoother development experience.

React - TypeScript	React - JavaScript		Vanilla TypeScript	Vanilla JavaScript
![React][react-icon] & ![TS][ts-icon] Soon!	![React][react-icon] & ![JS][js-icon] Soon!		![TS][ts-icon] Soon!	![JS][js-icon] [Repo][vite-three-js]

Webpack (Babel compiler)

Is more a flexible solution, capable of handling complex configurations.

React - TypeScript	React - JavaScript		Vanilla TypeScript	Vanilla JavaScript
![React][react-icon] & ![TS][ts-icon] Soon!	![React][react-icon] & ![JS][js-icon] Soon!		![TS][ts-icon] Soon!	![JS][js-icon] /

Back to ⬆️

---