Author: Santanu

Please complete the previous tutorial about building a simple application by LWC Open Source.

Our object is that customer-service-app will show the Case records from Salesforce. Already, we have created customer-service-app as per the previous tutorial. Now, we have to connect to Salesforce to get the Case records and we have to upgrade the UI layer for our customer-service-app.

Step 1: Please open the customer-service-app in VS Code and you will get this type of project structure.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 2: Before updating any file, let’s discuss the importance of some existing files.

• api.js: We can see the api.js in this path src/server. This js file helps to execute this customer service application in the localhost or event in a specific port.
• lwc-services.config.js: We can see this file in the root directory of this project. This file defines the path for the resources, sourceDir, moduleDir. So, system will understand the executable files.
• index.html:  We can see the index.html page in this path src/client. This html is the starter page of the application. From this html file we will call our lwc template by index.js.
• index.js: We can see the index.js in this path src/client.  This js file helps to call our lwc template named “app” during running of the application.
• app folder: We can get this folder in this path src/client/modules/my. This folder contains app.html and app .js file where we will write our business logic.
• greeting folder: We can also get this folder in this path src/client/modules/my. This is invoked from app.html file. This folder contains greeting.html and greeting.js file to show the greeting message by default.
• package.json: At last, we can see the information related to installed node modules in dependencies and devDependencies tag and how can we run the application using npm run watch.

Take time. No hurry. I would like to request you please see the above-mentioned files carefully before we will change the code to fulfill the business objective of our customer-service-app.

Step 3: First we will create a folder named “data” under this path src/client/modules. In this data folder, please create another folder called “caseServices“.  In this “caseServices” folder, please create a caseServices.js file. So, now, the module looks like:

 

 

 

 

 

Step 4: Please update the following code snippet for the customerServices.js file.

const URL = '/api/cases';
let cases = [];
export const getCases = () => fetch(URL)
  .then(response => {
    if (!response.ok) {
      throw new Error('No response from server');
    }
    return response.json();
  })
  .then(result => {
    cases = result.data;
    return cases;
  });

Step 5: Please execute this command from the terminal of the VS Code.

npm install jsforce dotenv

This will help to install the jsforce node modules to build communication with Salesforce and dotenv node modules to work with environment files. After successful execution, you can see the dependencies of package.json file looks like:

 

 

 

 

 

Step 6: Please create a new file named “.env” in the root directory of the project just like

SF_LOGIN_URL=LOGIN_URL
SF_USERNAME=YOUR_USERNAME
SF_PASSWORD=YOUR_PASSWORD  
SF_TOKEN=YOUR_SECURITY_TOKEN

This “.env” files contains credential information to log into Salesforce Instance. So, please fill up the correct information.

Step 7: Now, we will update the api.js file under the path src/server. So, please update the api.js file in this following code snippet.

// Simple Express server setup to serve for local testing/dev API server
const compression = require('compression');
const helmet = require('helmet');
const express = require('express');

const jsforce = require('jsforce');
require('dotenv').config();
const { SF_USERNAME, SF_PASSWORD, SF_TOKEN, SF_LOGIN_URL } = process.env;
if (!(SF_USERNAME && SF_PASSWORD && SF_TOKEN && SF_LOGIN_URL)) {
    console.error(
        'Cannot start app: missing mandatory configuration. Check your .env file.'
    );
    process.exit(-1);
}
const conn = new jsforce.Connection({
    loginUrl: SF_LOGIN_URL
});
conn.login(SF_USERNAME, SF_PASSWORD + SF_TOKEN, err => {
    if (err) {
        console.error(err);
        process.exit(-1);
    }
});


const app = express();
app.use(helmet());
app.use(compression());

const HOST = process.env.API_HOST || 'localhost';
const PORT = process.env.API_PORT || 3002;

app.get('/api/cases', (req, res) => {
    const soql = `SELECT Id, CaseNumber, Subject, Status, Priority, format(CreatedDate) formattedCreatedDate, format(ClosedDate) formattedClosedDate FROM Case`;
    
    conn.query(soql, (err, result) => {
        if (err) {
            res.sendStatus(500);
        } else if (result.records.length === 0) {
            res.status(404).send('Session not found.');
        } else {
            const formattedData = result.records.map(caseRecord => {
                let cases = [];
                return {
                    id: caseRecord.Id,
                    CaseNumber: caseRecord.CaseNumber,
                    Subject: caseRecord.Subject,
                    Status: caseRecord.Status,
                    Priority: caseRecord.Priority,
                    CreatedDate: caseRecord.formattedCreatedDate,
                    ClosedDate: caseRecord.formattedClosedDate,
                    cases
                };
            });
            res.send({ data: formattedData });
        }
    });
});

app.listen(PORT, () =>
    console.log(
        `✅  API Server started: http://${HOST}:${PORT}/api/v1/endpoint`
    )
);

Step 8: Now, we will update the app.html,app.js and app.css files under this path src/client/modules/my/app.
So, update the app.js file first:

app.js

import { LightningElement, track } from 'lwc';
import { getCases } from 'data/caseServices';

export default class App extends LightningElement {
    @track cases = [];

   connectedCallback() {
        getCases().then(result => {
        this.cases = result;
        });
    }

}

app.html

<template>
    <header>
        <img src="resources/lwc.png" alt="App logo">
        <h2>Customer Service Application</h2>
    </header>
    <!-- Page code -->
    <main class="content">      
            <table>
                <thead>
                    <tr>
                        <th scope="col">
                            <div>
                                <input type="checkbox"></input>
                            </div>
                        </th>
                        <th scope="col">
                            <div title="Name">Case Number</div>
                        </th>
                        <th scope="col">
                            <div title="Subject">Subject</div>
                        </th>
                        <th scope="col">
                            <div title="Status">Status</div>
                        </th>
                        <th scope="col">
                            <div title="Priority">Priority</div>
                        </th>
                        <th scope="col">
                            <div title="Created Date">Created Date</div>
                        </th>
                        <th scope="col">
                            <div title="Closed Date">Closed Date</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={cases} for:item="cs">                        
                            <tr key={cs.id}>
                                    <th scope="col">
                                        <div>
                                            <input type="checkbox" value={cs.CaseNumber} data-id={cs.id}></input>
                                        </div>
                                    </th>
                                    <th scope="col">
                                        <div>{cs.CaseNumber}</div>
                                    </th>
                                    <th scope="col">
                                        <div>{cs.Subject}</div>
                                    </th>
                                    <th scope="col">
                                        <div>{cs.Status}</div>
                                    </th>
                                    <th scope="col">
                                        <div>{cs.Priority}</div>
                                    </th>
                                    <th scope="col">
                                        <div>{cs.CreatedDate}</div>
                                    </th>
                                    <th scope="col">
                                        <div>{cs.ClosedDate}</div>
                                    </th>
                                </tr>
                    </template>
                </tbody>
            </table>       
    </main>
</template>

app.css

.content {
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
}
header {
    padding: 1rem;
    display: flex;
    color: #ffffff;
    background: #0288d1;
    box-shadow: 0 4px 3px rgba(1, 87, 155, 0.5);
    align-items: center;
}
header img {
    height: 3rem;
    margin-right: 0.3rem;
}
header h2 {
    font-size: 1.75rem;
    font-weight: 300;
}

Step 9: Now, we will delete the unused folder or files. We can delete greeting folder as there is no dependency on this folder for our customer-service-app. We can delete “__tests__” folder as we will not work on this at this moment. So, the entire src structure looks like:

 

 

 

 

 

 

 

Step 10: Now, run the command

npm run watch 

from the terminal of VS Code and you will get the output at http://localhost:3001

 

Fantastic! you have successfully communicated with Salesforce for this LWC Open Source app.

In this example, we can see all the Case records into our own customer-service-app, but the UI doesn’t look good. Something is missing. Yes, you are right. Still, we have not applied Salesforce Lightning Design Styles. Let’s focus this into the next tutorial.

13,214 total views, 3 views today

In the previous articles, we have seen how to create simple node application with express server. Now, we will see how to create a simple application using Lightning Web Component(LWC) Open Source.

In this tutorial, we will try to host an application for Customer Service Programme. So, please maintain the following steps:

Step 1: Still, if you have not installed Node.js please install it first.  After that please set the environment variable for Node JS framework.

Step 2: Please open a command line or terminal and point to any drive.

Step 3: Just write down this line

 npx create-lwc-app customer-service-app 

Here, customer-service-app is our application name.

Step 4: During the execution of this command, please enter the necessary information as per the following image:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

It will take a few minutes to create a customer-service-app using LWC Open Source.  And, you will get this confirmation.

Step 5: Now, open this application customer-service-app from Visual Studio Code.

Step 6: Please execute the following command from the terminal of your VS Code or command line to see the result:

npm run watch

 

 

 

Step 7: Now, if we will run this URL: http://localhost:3001, we will get the result:

 

 

Amazing! Now, we are able to create and execute a simple application using Lightning Web Component Open Source.

Special Thanks to Salesforce to help us to create an application using Lightning Web Component Open Source in a very short time.

14,638 total views, 12 views today

In this tutorial, we will see how can we include Salesforce Lightning Design System (SLDS) component into a node application. But, before this please read this blog (Build Simple Application by Node JS) first.

In the previous blog (Build Simple Application by Node JS), we have seen how will we execute a simple node application by express server framework. Now, we will include SLDS component into the same application. So, please maintain all the following steps:

Step 1: Open VS Code and open the same folder named “simple-node-app“.

Step 2: Open the terminal from your VS Code by using Shortcut Key (ctrl + `) (for windows).

Step 3: Now, we will install SLDS Library into the node_modules folder by executing the following command from the terminal of VS Code.

 npm install @salesforce-ux/design-system 

Step 4: After installation, you can see that dependency files are upgraded with @salesforce-ux/design-system in package.json file as per the following image.

 

 

 

 

 

 

 

 

 

 

We can get all the SLDS details from this url: https://lightningdesignsystem.com

Step 5:(optional): Please create a .gitignore file in the project’s root directory. This file will direct
the respective files/modules to be ignored during git push process. Here, we don’t want to push the “node_modules” folder in GIT repository. So, we will update the .gitignore file in this way:

# Tooling files
node_modules

Step 6: Create an index.html file in the project’s root directory with the following code snippet:

<html lang="en">
    <head>
        <title>HTML with SLDS by Node</title>
    </head>
    <body style="background-color:rgb(243, 242, 243)">    
       <div class="slds-card">          
          <div class="slds-p-around_medium">Hello World!</div>
       </div>
    </body>
</html>    

We will just show the “Hello World!” message.

Step 7: Now, the structure of our project looks like:

 

 

 

 

 

Step 8: Now, open the index.js file and update the code snippet with the following lines:

const express = require('express');
const app = express();
const path = require('path');
 
var PORT = process.env.port || 3001;

const SLDS_DIR = '/node_modules/@salesforce-ux/design-system/assets';

app.use('/slds', express.static(__dirname + SLDS_DIR));
 
app.get('/', function (req, res) {
  //res.send('Hello World!');
  res.sendFile(path.resolve('index.html'));
});

app.listen(PORT, function () {
  console.log(`App listening on port ${PORT}`);
});

Here, you can see we have changed multiple lines. Let’s discuss one by one:

• We have declared a constant variable named “SLDS_DIR” where we have given the pathname in which salesforce-lightning-design-system styles folder exists.
• Next, we are passing this variable in express.static() method with “__dirname” to declare the “/slds” path at line no. 9. So, for the next time, in the html file, if we need to call the salesforce-lightning-design-system.css we only need to use “/slds/styles/salesforce-lightning-design-system.css“.
• In the next step, we will call our index.html file by using the following syntax: res.sendFile(path.resolve(‘index.html’));

Step 9: Now, run the application by executing this command

 node index.js 

from the terminal of the VS Code. The application will be hosted on localhost:3001.

So, we will get the output in this url: http://localhost:3001 as per the following image

Oh no! But, we are not getting the styles from SLDS. Something is missing.
Don’t worry! Let’s execute the next Step.

Step 10: Please link the salesforce-lightning-design-system.css file in the header of the html file just like:

<html lang="en">
    <head>
        <title>HTML with SLDS by Node</title>
        <link rel="stylesheet" type="text/css" href="/slds/styles/salesforce-lightning-design-system.css" />
    </head>
    <body style="background-color:rgb(243, 242, 243)">    
       <div class="slds-card">          
          <div class="slds-p-around_medium">Hello World!</div>
       </div>
    </body>
</html>

Now, refresh your browser or executing this url: http://localhost:3001 again to see the correct output as per the following image

WOW! Now, we can see the “Hello World” message with SLDS design in SLDS card. Enjoy!!

14,277 total views, 6 views today