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

In this tutorial, we’ll learn about the end-to-end process of creating an application from scratch, hosting it on Github Pages, and finally deploying it to . We’ll also look at the various deployment options, including Express server and other alternatives. So, let’s dive right in and build our first LWC open source app! LWC open-source Heroku Heroku 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 , 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. Salesforce developers For , 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. full-stack devs The key advantages of the 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 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 YouTube videos covering how to , , , and . Create an LWC App Host an LWC OSS App on Github Pages Deploy an LWC App with Heroku and Express Deploy an LWC App With Heroku Express without 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 create-LWC-app "demo-app." Before creating a demo app, you need the following: and npm 5.2 or above Node.js (npx) Node Package Runner 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. Yes Do you want to use the simple setup? demo-app Package name for npm Standard web app Select the type of app you want to create No Do you want a basic Express API server? 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 /Users/gaurav/Desktop/demo-app.. Checkout the section your to get started. in `scripts` of `package.json` Understanding the Skeleton Project Structure Let’s open the in Visual Studio Code to understand the skeleton app structure. demo-app project Demo app structure The source code for our sample app is located in the folder. The entry point for our application is src src/index.html index.html The sample app is served on the route based on the route that’s created in demo-app index.js index.js All LWC are present in the , within the "my" namespace. modules folder Modules structure For this , we have two pre-built components— and . The structure of each component contains: demo-app app greeting 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 directory that contains the component’s unit tests 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 Local execution You can verify it by opening in any browser. It should show this page. http://localhost:3001 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 Build command Running will show a confirmation that the build has been successfully completed. npm run build Build success This will create a sub-folder in the project. In it contains the files to be deployed on Github Pages. dist 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 branch. main First, create a public repo on Github. Create a new repo Once the repo has been created, push the files in the directory to your repo by using the following commands: dist Steps to push code to repo Once the files have been pushed successfully, it will show the following message: Enumerating objects: , done. Counting objects: % ( / ), done. Writing objects: % ( / ), bytes | KiB/s, done. Total (delta ), reused (delta ) To https: * [ branch] main -> main Branch set up to track remote branch . 3 100 3 3 100 3 3 238 238.00 3 0 0 0 //github.com/gauravkheterpal/demo-app.git new 'main' 'main' from 'origin' Enable Github Pages by accessing the link on the repository page and choose the branch. settings main 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. 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 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 . And Heroku supports multiple programming languages, build packs, and plugins. Heroku building 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. No Do you want a basic Express API server? To deploy the app, we’ll create a in the app’s root directory. The content of this determines the process type and the commands executed by the app on startup. Procfile Procfile 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 The first step is to log in to your Heroku account. Heroku login This will open a web browser where you'll be prompted to enter your Heroku credentials. Heroku login page Once the authentication is successful, it will show a confirmation message. Heroku login success Next, create a Heroku app using the command. Once you're successful, it will show a confirmation message with the Heroku URL for your app. heroku create Heroku create You can identify the remote git endpoint for your Heroku app by using git remote -v git remote endpoint identification We’ll push our demo app files to this remote git endpoint using the following commands: git commit When you run the command, it runs the build script to deploy the app to Heroku. git push heroku main git push Once it completes, you'll be shown a confirmation message. git push confirmation You can then use the command to open the Heroku URL for your application. It should show this page: heroku open 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. Yes Do you want to use the simple setup? demo-app Package name for npm Standard web app Select the type of app you want to create Yes Do you want a basic Express API server? To deploy the app, we’ll create a in the app’s root directory. Procfile Express API server The key difference here is that the serve script refers to the built-in Express server. Serve target You will notice that this project has a file called which contains the following: server/api.js 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 serves up the APIs while supports the backend content. To make things simple, we make the following changes in so that it serves both APIs as well as the static content. api.js server.js api.js api.js This ensures that non-API endpoint calls are still rendering while the API endpoint calls still work like before. We then modify the "serve" target to run the . index.html api.js serve target Once that’s done, the remaining steps are exactly the same as in the earlier section. Use the command to create your Heroku app. It will show a confirmation message with the Heroku URL for your app. heroku create Heroku create You can identify the remote git endpoint for your Heroku app by using git remote -v git remote endpoint We’ll push our demo app files to this remote git endpoint using the following commands: git commit When you run the command, it runs the build script that deploys the app to Heroku. git push heroku main git push Once it completes, a confirmation message is shown. git push confirmation You can then use the command to open the Heroku URL for your application. It should show this page: heroku open 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!