# SpreadJS with Vite
## Content
Vite is a build tool used for scaffold projects for multiple frameworks, such as React, Vue, etc. SpreadJS supports using individual module and plugin together in Vite development environment.
### **Using Module and Plugin together**
This involves the following steps:
1. Open the command prompt window and type the following commands to configure Vite development environment.
```shell
npm create vite@latest
```
Then choose the following options.
```shell
√ Project name: ... vite-project
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript
```
And start the project using the following commands.
```shell
cd vite-project
npm install
npm run dev
```
For more information on how to create a project using Vite, refer to [Vite](https://vitejs.dev/guide/).
2. Install SpreadJS modules and plugins in the project.
Install the SpreadJS NPM modules and plugins using the following commands:
```shell
npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print
```
3. Update main.ts file using the following code:
```typescript
import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print";
let spread = new GC.Spread.Sheets.Workbook("ss");
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS");
spread.print();
```
4. Update index.html file using following code:
```html
Vite + TS
```
5. Add vite.config.js file in vite-project folder having the following code:
```javascript
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@mescius/spread-sheets': fileURLToPath(new URL('./node_modules/@mescius/spread-common', import.meta.url))
}
}
})
```