Tutorial: Create, Host, and Deploy An LWC Open-Source Application From Scratch

Introduction to Lightning Web Components

For Salesforce developers, the best part of LWC is that the components coexist and interoperate on a page with Aura components. It’s fair to say that LWC has introduced a major paradigm shift in Salesforce development. As a developer, you are no longer working with a proprietary language such as Visualforce. Rather, you can leverage the LWC framework, built using modern and open-web standards, which allows you to create applications not just for Salesforce but for other platforms as well.  

For full-stack devs, LWC represents  "fast, versatile web components and apps using the stack and tools your team prefers." In other words, they're a set of fast, reusable, open-source web components you can use on your project, on top of most any web stack. 

Let’s Build Our LWC Application!

To start building our LWC application, we leverage the open-source tool which builds a seed project with the required structure. Let’s call our sample LWC application "demo-app."

• and npm 5.2 or above
• (npx)
• Git Command Line

npx create-lwc-app demo-app

• Do you want to use the simple setup? Yes
• Package name for npm demo-app
• Select the type of app you want to create Standard web app
• Do you want a basic Express API server? No

🎉  Created demo-app in /Users/gaurav/Desktop/demo-app.. Checkout the `scripts` section of your `package.json` to get started.

Understanding the Skeleton Project Structure

Let’s open the demo-app project in Visual Studio Code to understand the skeleton app structure. 

Demo app structure

The source code for our sample app is located in the src folder. The entry point for our application is src/index.html

index.html

The sample app is served on the route demo-app based on the route that’s created in index.js

index.js

All LWC are present in the modules folder, within the "my" namespace.

Modules structure

For this demo-app, we have two pre-built components—app and greeting. The structure of each component contains: 

• An HTML file that includes the component’s markup for rendering
• A JS file with the component’s business logic
• A CSS file that has the component’s styling
• A tests directory that contains the component’s unit tests
  

Running the App Locally

npm run watch

This would launch the app on localhost:3001

Local execution

Local verification

Hosting an LWC App on Github Pages

To do so, run the build command defined in the package.json file.

Build command

Running

npm run build

Build success

This will create a dist sub-folder in the project. In it contains the files to be deployed on Github Pages.

dist folder

Now that we’ve built the app, let’s look at how we deploy it to Github Pages. While there are multiple ways to organize file branching on Github pages, let’s go with the simplest approach for now—we’ll push our files to the main branch.

Create a new repo

Once the repo has been created, push the files in the dist directory to your repo by using the following commands:

Steps to push code to repo

Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 238 bytes | 238.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To //github.com/gauravkheterpal/demo-app.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Enable Github Pages by accessing the settings link on the repository page and choose the main branch.

Github Pages

Github Pages demo app verification

Deploying to Heroku

Before we get deeper into the specifics of deploying our demo app to Heroku, let’s understand a little better. Heroku is a platform as a service (PaaS) that allows developers to rapidly build and deploy web applications. Heroku takes care of the plumbing—DevOps, scaling, etc.—and lets you focus on building. And Heroku supports multiple programming languages, build packs, and plugins. 

Do you want a basic Express API server? No

To deploy the app, we’ll create a in the app’s root directory. The content of this Procfile determines the process type and the commands executed by the app on startup.

Procfile

Heroku login

Heroku login page

Heroku login success

Next, create a Heroku app using the

heroku create

Heroku create

You can identify the remote git endpoint for your Heroku app by using

git remote -v

git remote endpoint identification

git commit

When you run the

git push heroku main

git push

git push confirmation

You can then use the

heroku open

Heroku instance verification

• Do you want to use the simple setup? Yes
• Package name for npm demo-app
• Select the type of app you want to create Standard web app
• Do you want a basic Express API server? Yes

To deploy the app, we’ll create a Procfile in the app’s root directory. 

Express API server

Serve target

You will notice that this project has a file called server/api.js which contains the following:

api.js

Notice that this is using a different port (3002) than the built-in Express server port (3001) used in server.js

server.js

The key difference here is that api.js serves up the APIs while server.js supports the backend content. To make things simple, we make the following changes in api.js so that it serves both APIs as well as the static content.

api.js

This ensures that non-API endpoint calls are still rendering index.html while the API endpoint calls still work like before. We then modify the "serve" target to run the api.js.

serve target

Once that’s done, the remaining steps are exactly the same as in the earlier section. Use the

heroku create

Heroku create

You can identify the remote git endpoint for your Heroku app by using

git remote -v

git remote endpoint

git commit

When you run the

git push heroku main

git push

git push confirmation

You can then use the

heroku open

Heroku instance verification

Conclusion