SpreadJS with Vite

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.

   npm create vite@latest

   Then choose the following options.

   √ Project name: ... vite-project
   √ Select a framework: » Vanilla
   √ Select a variant: » TypeScript

   And start the project using the following commands.

   cd vite-project
   npm install
   npm run dev

   For more information on how to create a project using Vite, refer to Vite.

2. Install SpreadJS modules and plugins in the project.

   Install the SpreadJS NPM modules and plugins using the following commands:

   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:

   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:

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <link rel="icon" type="image/svg+xml" href="/vite.svg" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Vite + TS</title>
       <link rel="stylesheet" type="text/css" href="../node_modules/@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
     </head>
     <body>
       <div id="ss" style="width: 100%;height:300px;"></div>
       <script type="module" src="/src/main.ts"></script>
     </body>
   </html>

5. Add vite.config.js file in vite-project folder having the following code:

   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))    
   } 
   }
   })