Setting up Tools and Dependencies
Get the latest developer guides on Fynd Partners Help
In this document, you'll learn the following setup procedure:
- Installing the latest stable version of Node.js
- Creating a project folder
- Building the project scaffold using Vue CLI
Installing the latest stable version of Node.js
Install the latest version from Node JS website.
If Node.js is already installed on your PC, ensure its version is v12.0.0 or above. You can check Node.js version using the below command.
node -v
Creating a project folder
Create a folder named
sample-extension
mkdir sample-extension
Navigate to that folder in terminal.
cd sample-extension
Initialize the node project.
npm init
This command will create a package.json
file in the folder. At the time of running the npm init
command, you can specify the package name, version, description, entry point, test command, git repository, keywords, author, and license.
Building the project scaffold using Vue CLI
Install Vue CLI library.
npm install -g @vue/cli
vue --versionCreate a project scaffold. Select version 2 of Vue if prompted.
cd ../
vue create sample-extension --merge
cd sample-extensionInstall Express library and dependencies.
npm i express body-parser cookie-parser --save
Build your Vue app using the below commands. It generates public JS and CSS files, and an index file to serve your app.
npm run build
Let's setup a basic Express app to serve this Vue.js app. Within the sample-extension folder, create a file named app.js and paste the below code.
app.js'use strict';
const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const path = require("path");
const app = express();
app.use(cookieParser("ext.session"));
app.use(bodyParser.json({
limit: '2mb'
}));
app.use('/_healthz', (req, res, next) => {
res.json({
"ok": "ok"
});
});
app.use(express.static(path.join(__dirname, "./dist")));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, "./dist/index.html"));
});
module.exports = app;Create another file named server.js within the sample-extension folder, and paste the below code.
server.js'use strict';
const app = require("./app");
const port = 3000;
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
});Test your App server
npm start
Open http://localhost:3000 in your web browser. If it loads the following page, your setup is successful.