Starter template with Vite and TypeScript for front-end projects (VITAM)
Tags: webdev, vite, typescript, opensource
Published: 2022-02-13 13:24:30

I've created a starter template which is named VITAM for front-end development. This template focuses on building a static website and suits small to medium projects like a landing page and a corporate website.

[👉 Check out VITAM](https://github.com/Kazuki-tam/vitam)

VITAM provides some features to increase productivity for front-end developers.

You can get these benefits and features from VITAM.

- Fast HMR with Vite
- PWA support
- Quick local server
- Compressing image assets
- Breaking HTML smaller files with Handlebars
- Referring to Enduring CSS
- Out of the box useful JavaScript libraries
- Out of the box useful SCSS functions and Mixins
- Checking TypeScript with ESLint
- HTML Validation with HTML-validate
- Transforming styles with PostCSS
- Built-in test runner with Jest

## Requirements to use VITAM

Before you start using VITAM, make sure you do these following tasks.

- Install [Node.js(Node v16+)](https://nodejs.org/en/)
- Install [Yarn](https://yarnpkg.com/)

Here is recommeded tools but they are not necessary.

- [Visual Studio Code](https://code.visualstudio.com/)
- [GitHub](https://github.com/)

## Creating a repository from a template

You can directly generate a new repository from VITAM's repository.
Please click Use this template.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyre1bpenstu8zxldjo4.png)

[Creating a repository from a template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#creating-a-repository-from-a-template)

## Clone your project

Clone the repository you generated from VITAM.

```
git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
```

## Install packages

Install all dependencies for a project with bellow command.

```
yarn install
```

## Start development

Run a build command after installed packages.

```
yarn build
```

And then, run a start command.

```
yarn start
```

That's all to do before you start project.
Let's enjoy development!

## Template detail

I've written down below the infomation you should know to use VITAM.

### HTML

You can handle bundling multiple HTML files with vite-plugin-handlebars.
Make sure Handlebars Context as you need.

If you want to use multiple partial files, Add your partial files into the \_partials folder.

`src/_partials`

You can call partial files directly by other templates like this example.

```html
{{> _header }}
  <main>
    <h1>Welcome to VITAM Docs!</h1>
    <p>VITAM is a front-end template with Vite for static websites.</p>
  </main>
{{> _footer }}
```

site.config.ts manages the site's basic information. You have to edit site.config.ts when you create a new page.

```ts
const pagesData = {
  '/sample/index.html': {
    locale: siteData.locale,
    title: `Smaple Page | ${siteData.siteName}`,
    description: `This is a sample page. ${siteData.description}`,
    url: `${siteData.url}/sampple/`,
    ogpImage: siteData.ogpImage,
    ogType: 'article',
    fbAppId: siteData.fbAppId,
    fbAdmins: siteData.fbAdmins,
    twitterCard: siteData.twitterCard,
    twitterSite: siteData.twitterSite,
  },
};
```

## Sass (Dart Sass)

You can manage style sheets logically with Sass. I've already defined some functions and Mixins.  
Check out these files before you get started with your project.

- `src/scss/foundation/functions/*.scss`
- `src/scss/foundation/mixins/*.scss`

[📖 Learn Sass](https://sass-lang.com/)

## CSS Architecture

VITAM gives you CSS architecture which is [Enduring CSS](https://ecss.benfrain.com/) standardly, but it's not necessary architecture in all projects. I recommend you introduce the best architecture in each project.

[📖 Learn CSS Architecture](https://philipwalton.com/articles/css-architecture/)

[📖 Learn Enduring CSS](https://ecss.benfrain.com/)

## TypeScript

VITAM supports TypeScript. It's easy to import ts files.  
You can customize TypeScript's options with `tsconfig.json` at any time.

I've already defined some utility functions.
Check out these files before you get started with your project.

`src/ts/utils/*.ts`

`postInstall` command will help you to install typings in this project.

Jest is built-in in this project. You can run Jest from the command line.

[📖 Learn TypeScript](https://www.typescriptlang.org/)  
[📖 Learn Jest](https://jestjs.io/)

## PWA

[Vite Plugin PWA](https://vite-plugin-pwa.netlify.app/) supports making your website faster.
Edit `vite.config.ts` if you would like to customize settings for PWA.
You can generate icons for PWA with [Favicon Generator](https://realfavicongenerator.net/).

Note: Please replace some asset files for PWA with your project's files.

[📖 Learn PWA](https://web.dev/learn/pwa/)

## GitHub Actions

If you use GitHub in your project, you can take advantage of GitHub Actions to automate your development workflows.
Check out this file before you get started with your project.

`.github/workflows/project-ci.yml`

## Conclusion

I added some useful libraries and utility functions into VITAM to improve your development efficiency. I hope you take advatage of them.

[👉 Check out VITAM](https://github.com/Kazuki-tam/vitam)