How to Create, Host, and Deploy an LWC OSS App
Tags: webdev, architecture, javascript
Published: 2021-02-08 12:40:46

In this tutorial, we’ll learn about the end-to-end process of creating an[ LWC open source](https://lwc.dev/) application from scratch, hosting it on Github Pages, and finally deploying it to[ Heroku](https://www.heroku.com). We’ll also look at the various[ Heroku](https://www.heroku.com) deployment options, including Express server and other alternatives. So, let’s dive right in and build our first LWC open source app!


### **Introduction to Lightning Web Components**

Lightning Web Components (LWC) are an open source and lightweight set of reusable components built with JavaScript, JavaScript, and CSS.

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 have 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. 

The key advantages of LWC framework include better app performance and a constantly evolving, improving roadmap thanks to the open standards. For more information and examples,[ check out the official guide](https://lwc.dev/guide/introduction).

So let's build an LWC project and look at options for hosting and deploying it.

Note: If you'd rather watch a video than read, I was inspired to write this article from these vides covering how to[ Create an LWC App](https://www.youtube.com/watch?v=-GMvhbZgqAI&feature=youtu.be),[ Host an LWC OSS App on Github Pages](https://www.youtube.com/watch?v=LqPPDyTD67U&feature=youtu.be),[ Deploy an LWC App with Heroku and Express](https://www.youtube.com/watch?v=WHD5VZVabNw&feature=youtu.be), and[ Deploy an LWC App With Heroku without Express](https://www.youtube.com/watch?v=UoO_-3kC7x4&feature=youtu.be).


### **Let’s Get Started!**

To start building our LWC application, we leverage the open source _[ create-lwc-app](https://github.com/muenzpraeger/create-lwc-app)_ tool which builds a seed project with the required structure. Let’s call our sample LWC application _"demo-app."_

Before creating a demo app, you need the following:



*   [Node.js](https://nodejs.org/en/) and npm 5.2 or above
*   [Node Package Runner](https://nodejs.dev/learn/the-npx-nodejs-package-runner) (npx)
*   _Git Command Line_

Equipped with these prerequisites, you can now go to the terminal. From there, create a new directory and then run the following command:

`npx create-lwc-app demo-app`

Once you run the above command, it asks you for a confirmation for the following parameters. For now, let’s just pick the default options—we’ll explore them in the subsequent sections of this tutorial.



*   **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

Once the command completes, it will install the default structure and framework as well as its associated dependencies. If everything is successful, you should see a confirmation message like this:

`🎉  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. 


![](https://dev-to-uploads.s3.amazonaws.com/i/g7mdir9kgxwusygdbwym.png)

_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_


![](https://dev-to-uploads.s3.amazonaws.com/i/usrsp6lwxrfqdigsdfvn.png)

_index.html_

The sample app is served on the route _demo-app_ based on the route that’s created in _index.js_


![](https://dev-to-uploads.s3.amazonaws.com/i/fe76uta7w3tlnpxxtok0.png)

_index.js_

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


![](https://dev-to-uploads.s3.amazonaws.com/i/8rmvha98en4t9jarha4a.png)

_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 which contains the component’s unit tests


### **Running the App Locally**

It’s always good to run the app locally first to make sure there are no build issues. To do so, execute this command:

`npm run watch`

This would launch the app on _localhost:3001_


![](https://dev-to-uploads.s3.amazonaws.com/i/t4bio58cxq8plhb0th2o.png)

_Local execution_

You can verify it by opening[ http://localhost:3001](http://localhost:3001) in any browser. It should show this page.


![](https://dev-to-uploads.s3.amazonaws.com/i/cqbqv0usdnwsatr5udv2.png)

_Local verification_


### **Hosting an LWC App on Github Pages**

Now that we’ve run our LWC demo app locally, let’s move to the next step: Github Pages app hosting. This is a static site hosting service which can directly serve files from a Github repo. 

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


![](https://dev-to-uploads.s3.amazonaws.com/i/h9cjrrpu6ehs8bkp2te7.png)

_Build command_

Running `npm run build` will show a confirmation that the build has been successfully completed.


![](https://dev-to-uploads.s3.amazonaws.com/i/ewq3pgcf9l3ls2w4b4pk.png)

_Build success_

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


![](https://dev-to-uploads.s3.amazonaws.com/i/kxnmmekprqg2pfkedmfb.png)

_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.

First, create a public repo on Github. 


![](https://dev-to-uploads.s3.amazonaws.com/i/wvo0ke5sz0brcq0dbea5.png)

_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:


![](https://dev-to-uploads.s3.amazonaws.com/i/vps17c4z900ue94dx5if.png)

_Steps to push code to repo_

Once the files have been pushed successfully, it will show the following message:
```
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 https://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.


![](https://dev-to-uploads.s3.amazonaws.com/i/v0gxerq6yjgqmnfw5hiq.png)

_Github Pages_

This will deploy your app to Github Pages. Once complete, it will show a confirmation message that the app has been deployed to a Github Pages URL. You can open the provided URL in any browser, and it will show the demo app.


![](https://dev-to-uploads.s3.amazonaws.com/i/bldl8xsdbh12wic191iz.png)

_Github Pages demo app verification_

As a next step, you can automate the deployment process using Github actions, pre-commit hooks and gh-pages library. 


### **Deploying to Heroku**

Before we get deeper into the specifics of deploying our demo app to Heroku, let’s understand[ Heroku](https://www.heroku.com)<span style="text-decoration:underline;"> </span>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. 

First up, we’ll deploy our demo app to Heroku without using the Express server. We chose this option when we created the sample application using the CLI.



*   **Do you want a basic Express API server?** No

To deploy the app, we’ll create a _[ Procfile](https://devcenter.heroku.com/articles/procfile)_ in the app’s root directory. The content of this _Procfile_ determines the process type and the commands executed by the app on startup.


![](https://dev-to-uploads.s3.amazonaws.com/i/wcnogq6e2b57c923oa8h.png)

_Procfile_

Now, we’re ready to deploy this app to Heroku using the Heroku CLI. If you don't have Heroku CLI installed, see the steps listed[ here](https://devcenter.heroku.com/articles/heroku-cli).

The first step is to login to your Heroku account.


![](https://dev-to-uploads.s3.amazonaws.com/i/44jgnjnaol50nro8alcn.png)

_Heroku login_

This will open a web browser where you'll be prompted to enter your Heroku credentials.


![](https://dev-to-uploads.s3.amazonaws.com/i/cvsofomtzoc4z0i2phl8.png)

_Heroku login page_

Once the authentication is successful, it will show a confirmation message.


![](https://dev-to-uploads.s3.amazonaws.com/i/ks7mg8gvb010iijmy755.png)

_Heroku login success_

Next, create a Heroku app using the `heroku create` command. Once you're successful, it will show a confirmation message with the Heroku URL for your app.


![](https://dev-to-uploads.s3.amazonaws.com/i/sfc5x8e2i4i8ig84qite.png)

_Heroku create_

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


![](https://dev-to-uploads.s3.amazonaws.com/i/wta4luqyw4xryge4y7k3.png)

_git remote endpoint identification_

We’ll push our demo app files to this remote git endpoint using the following commands:


![](https://dev-to-uploads.s3.amazonaws.com/i/zgwo3ma6lsx461bqua98.png)

_git commit_

When you run the `git push heroku main` command, it runs the build script to deploy the app to Heroku. 


![](https://dev-to-uploads.s3.amazonaws.com/i/3wr099024mv8eh8z1v9z.png)

_git push_

Once it completes, you'll be shown a confirmation message.


![](https://dev-to-uploads.s3.amazonaws.com/i/cdqvulqu4a770zfurr2e.png)

_git push confirmation_

You can then use the `heroku open` command to open the Heroku URL for your application. It should show this page:


![](https://dev-to-uploads.s3.amazonaws.com/i/6l93pzec4486yqs0ojkc.png)

_Heroku instance verification_

Let’s now look at the other approach for deploying a LWC app on Heroku: using the Express server. When creating the app, choose the option to use the Express server.



*   **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. 


![](https://dev-to-uploads.s3.amazonaws.com/i/5npdsu06dlnlgzrzgb8n.png)

_Express API server_

The key difference here is that the serve script refers to the built-in Express server.


![](https://dev-to-uploads.s3.amazonaws.com/i/6bcr7uh9nvggi54hxyb1.png)

_Serve target_

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


![](https://dev-to-uploads.s3.amazonaws.com/i/z36glccniagye0on5zmj.png)

_api.js_

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


![](https://dev-to-uploads.s3.amazonaws.com/i/5mhi44jv62v2jeq7knnn.png)

_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.


![](https://dev-to-uploads.s3.amazonaws.com/i/o3yaj2p6iakqt6ajvhi9.png)

_api.js_

This ensures that non-API endpoint calls are still rendering _index.html_ while the API endpoints calls still work like before. We then modify the "serve" target to run the _api.js._


![](https://dev-to-uploads.s3.amazonaws.com/i/8k507y7y2cooc6fz4xyo.png)

_serve target_

Once that’s done, the remaining steps are exactly the same as in the earlier section. Use the `heroku create` command to create your Heroku app. It will show a confirmation message with the Heroku URL for your app.


![](https://dev-to-uploads.s3.amazonaws.com/i/706tsdcculag5ari8vuo.png)

_Heroku create_

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


![](https://dev-to-uploads.s3.amazonaws.com/i/yk26ohu4s3qbhky7moye.png)

_git remote endpoint_

We’ll push our demo app files to this remote git endpoint using the following commands:


![](https://dev-to-uploads.s3.amazonaws.com/i/psdxfr224jf0a4bi94fu.png)

_git commit_

When you run the `git push heroku main` command, it runs the build script that deploys the app to Heroku. 


![](https://dev-to-uploads.s3.amazonaws.com/i/59tr0qb4h958098sd5wh.png)

_git push_

Once it completes, a confirmation message is shown.


![](https://dev-to-uploads.s3.amazonaws.com/i/nnz1c7mdqemfe8011l0z.png)

_git push confirmation_

You can then use the `heroku open` command to open the Heroku URL for your application. It should show this page:


![](https://dev-to-uploads.s3.amazonaws.com/i/wfq7i23t7ay3nm4vpr7s.png)

_Heroku instance verification_


### **Conclusion**

In this tutorial, we walked through the process of building a simple demo app using LWC, hosting it on Github Pages, and deploying it to Heroku with and without an Express server. In future tutorials, we’ll explore other aspects of LWC development and application hosting in more detail. Stay tuned!