NPM is used to manage node.js libraries. Now you can also use it with SpreadJS! In this blog, we'll go over how to use the SpreadJS NPM package in a webpack project.
Install Node.js and NPM
Before working with the project, make sure to download and install Node.js and NPM.
Setup Project Files and Folders
Now that Node.js and NPM are installed, we'll create the folders and files that will be used in the webpack project. The first folder to create will be called spreadjs_webpack.
Once the folder is created, open the command prompt, navigate to the created folder, and enter the following command:
npm init -y
This will create a package.json file with the following contents:
{
"name": "spreadjs_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
After that file is created, enter the following commands, hitting enter after each:
npm install webpack --save
npm install webpack-cli --save
This will add a node_modules folder to the project, this is where we'll get our Spread references.
First, we'll create a webpack.config.js file. Create this file and then add the following contents to the file:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: "development",
optimization: {
minimize: false
}
}
Also, the package.json file will need to be changed slightly:
{
"name": "spreadjs_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2"
}
}
In the same spreadjs_webpack folder, we'll create a dist folder and create an html file in that folder, called index.html. This html should start with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SpreadJS Development</title>
<script src="bundle.js"></script>
</head>
<body>
<div id="ss" style="width:80%;height:80vh;border:1px solid lightgray"></div>
</body>
</html>
The last folder and file we need to manually create is a src folder in the spreadjs_webpack folder, and an index.js file in that folder. We will add the contents later. The structure of the directory should look something like this:
spreadjs_webpack
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|-index.js
Install Spread.Sheets and Add References
Going back to the command prompt, enter the following command to install Spread.Sheets:
npm install @grapecity/spread-sheets
Once that has installed, go back to the package.json file and add a dependency for Spread.Sheets in the dependencies section:
{
"name": "spreadjs_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@grapecity/spread-sheets": "^11.1.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2"
}
}
To finish the HTML file, copy the Spread.Sheets css file from node_modules/@grapecity/spread-sheets/styles folder to the dist folder. Update the index.html file to reference this css file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SpreadJS Development</title>
<link href="gc.spread.sheets.excel2013white.css" rel="stylesheet" />
<script src="bundle.js"></script>
</head>
<body>
<div id="ss" style="width:80%;height:80vh;border:1px solid lightgray"></div>
</body>
</html>
Now we can add the code in the index.js file to actually initialize the Spread.Sheets component:
var gc = require('@grapecity/spread-sheets');
window.onload = function () {
var workbook = new gc.Spread.Sheets.Workbook(document.getElementById("ss"));
var worksheet = workbook.getActiveSheet();
worksheet.getCell(3,3).value("SpreadJS Npm Package in Webpack Project");
}
To test the project, go back to the command prompt and enter the following command:
npm run build
To see the page correctly running, open up the index.html file in a web browser:
This tutorial showed how easy it is to utilize the Spread.Sheets NPM package in a webpack project. This is an example to get you started so you can create more advanced projects.
To see the other NPM packages that we provide, check out our NPM page.
Kevin Ashley