Skip to main content

Setting up Tools and Dependencies

You are reading an outdated document

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

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

  1. Create a folder named sample-extension

    mkdir sample-extension
  2. Navigate to that folder in terminal.

    cd sample-extension
  3. 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

  1. Install Vue CLI library.

    npm install -g @vue/cli
    vue --version
  2. Create a project scaffold. Select version 2 of Vue if prompted.

    cd ../
    vue create sample-extension --merge
    cd sample-extension
  3. Install Express library and dependencies.

    npm i express body-parser cookie-parser --save
  4. 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
  5. 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;
  6. 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}`)
    });
  7. Test your App server

    npm start

Open http://localhost:3000 in your web browser. If it loads the following page, your setup is successful.

QG1

Test App Server