Vite
FAST works great with Vite and TypeScript, using a fairly standard setup. Let's take a look at how you can set up a FAST+TypeScript+Vite project, starting from scratch.
Setting up the Vite project
First, you'll need to make sure that you have Node.js version >=12.2.0 installed. You can learn more and download that on the official site.
With Node.js installed, you can use create-vite to scaffold a new Vite project.
npm create vite@latest
Follow the prompts, answering each question in turn. Enter fast-vite
as the project name, select vanilla
as the framework, and vanilla-ts
as the variant. When the CLI completes, you should have a basic runnable Vite application.
Next, we'll move into the project directory, where we'll set up our project.
cd fast-vite
Configuring packages
Let's install the FAST packages, along with supporting libraries. To do that, run this command from your new project folder:
npm install --save @microsoft/fast-components @microsoft/fast-foundation @microsoft/fast-element
Adding configuration and source
Now that we have a Vite project scaffolded, let's get things configured.
In the root of your project folder, you will see a tsconfig.js
file. Replace the contents of the file with the following markup:
{
"compilerOptions": {
"module": "esnext",
"lib": ["es2017", "dom"],
"declaration": true,
"emitDeclarationOnly": true,
"outDir": "./dist",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noImplicitAny": false,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": false
},
"include": ["src/**/*.ts"]
}
Then, create a new file at the root of your project folder called vite.config.js
and add the following code:
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: 'src/main.ts',
formats: ['es']
},
rollupOptions: {
external: /^@microsoft\/fast-(element|components)/
}
}
})
Using the components
With all the basic pieces in place, let's run our app in dev mode with npm run dev
. The Vite CLI should build your project and make it available on localhost. Right now, it displays a basic welcome message since we haven't added any code or interesting HTML. Let's change that.
First, open your src/main.ts
file and replace the contents of the file with the following code:
import {
provideFASTDesignSystem,
fastCard,
fastButton
} from '@microsoft/fast-components';
provideFASTDesignSystem()
.register(
fastCard(),
fastButton()
);
This code uses the FAST Design System to register the <fast-card>
and <fast-button>
components. Once you save, the dev server will rebuild and refresh your browser. However, you still won't see anything. To get some UI showing up, we need to update the HTML that uses our components. Replace the HTML template at the root of your folder with the following markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FAST Vite</title>
<script type="module" src="/src/main.ts"></script>
<link rel="stylesheet" href="/src/style.css" />
</head>
<body>
<fast-card>
<h2>Hello World!</h2>
<fast-button appearance="accent">Click Me</fast-button>
</fast-card>
</body>
</html>
Next, replace the contents of your src/style.css
file with the following code:
:not(:defined) {
visibility: hidden;
}
fast-card {
padding: 16px;
display: flex;
flex-direction: column;
}
h2 {
color: white;
font-size: var(--type-ramp-plus-5-font-size);
line-height: var(--type-ramp-plus-5-line-height);
}
fast-card > fast-button {
align-self: flex-end;
}
After saving your style.css
file, your browser will automatically refresh and you should see a card with text and a button.
Congratulations! You're now set up to use FAST, TypeScript, and Vite. You can import and use more components, build your own components, and when you are ready, build and deploy your website or app to production.
See a FAST+Vite+TypeScript starter project here.