Vite Vanilla JS Template

Initially built for personal use, I created this template for starting a new project with Vite.js and Vanilla Javascript. It is already set up with standard development tools like Prettier for easy code formatting and linting, with Vite for a robust, modern build process.

Scripts

Use the following scripts for your development workflow:

# Start the development server
npm run dev

# Checks your code for any linting errors
npm run lint

# Tries to automatically fix any linting errors present in your code
npm run lint:fix

# Formats your code in a consistent, predefined style using Prettier
npm run format

# Build for production
npm run build

# Preview the build
npm run preview

# Build and preview the project
npm run buildpreview

Folder Structure

This is the structure of the project:

/
├── .github                 # Github actions and workflows
├── node_modules            # Node.js dependencies for the project.
├── src                     # Source code
│   ├── fonts               # Store your fonts here
│   ├── images              # Store your images here
│   ├── js                  # Javascript files of your project
│   ├── sprites             # SVG files for generate sprites
│   ├── scss                # CSS styles for your project
├── .editorconfig           # Configuration for the EditorConfig plugin
├── .gitignore              # Files and folders to be ignored by Git
├── .prettierignore         # Files to be ignored by Prettier
├── .prettierrc             # Configuration for Prettier
├── index.html              # The HTML file for your project
├── LICENSE                 # The license for your project
├── package-lock.json       # Lockfile for your project's dependencies
├── package.json            # Defines your project and its dependencies
├── README.md               # This file
├── vite.config.js          # Configuration for Vite
├── vite.config.min.js      # Configuration for minified JS & CSS Vite files

SVG usage

<svg width="16" height="17" viewBox="0 0 16 17">
  <use xlink:href="./assets/sprites/states.svg#sprite-linkedin-logo"></use>
</svg>

License

This template was created under the MIT License.

Happy coding! 👨‍💻