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

@MichaelBMichael

I run Dev Spotlight – we write tech content material for tech corporations. Email at [email protected]

In this tutorial, we’ll be taught in regards to the end-to-end course of of making an LWC open-source utility from scratch, internet hosting it on Github Pages, and lastly deploying it to Heroku. We’ll additionally have a look at the assorted Heroku deployment choices, together with Express server and different alternate options. So, let’s dive proper in and construct our first LWC open supply app!

Introduction to Lightning Web Components

Lightning Web Components (LWC) are an open-source and light-weight set of reusable parts constructed with JavaScript, JavaScript, and CSS.

For Salesforce builders, the perfect a part of LWC is that the parts coexist and interoperate on a web page with Aura parts. It’s honest to say that LWC has launched a significant paradigm shift in Salesforce improvement. As a developer, you might be now not working with a proprietary language comparable to Visualforce. Rather, you’ll be able to leverage the LWC framework, constructed utilizing trendy and open-web requirements, which lets you create functions not only for Salesforce however for different platforms as effectively.  

For full-stack devs, LWC represents  “fast, versatile web components and apps using the stack and tools your team prefers.” In different phrases, they are a set of quick, reusable, open-source internet parts you should utilize in your challenge, on prime of most any internet stack. 

The key benefits of the LWC framework embrace higher app efficiency and a always evolving, enhancing roadmap due to the open requirements. For extra info and examples, take a look at the official information.

So let’s construct an LWC challenge and have a look at choices for internet hosting and deploying it.

Note: If you’d moderately watch a video than learn, I used to be impressed to put in writing this text from these YouTube movies protecting find out how to Create an LWC App, Host an LWC OSS App on Github Pages, Deploy an LWC App with Heroku and Express, and Deploy an LWC App With Heroku with out Express.

Let’s Build Our LWC Application!

To begin constructing our LWC utility, we leverage the open-source create-LWC-app software which builds a seed challenge with the required construction. Let’s name our pattern LWC utility “demo-app.”

Before making a demo app, you want the next:

Equipped with these stipulations, now you can go to the terminal. From there, create a brand new listing and then run the next command:

npx create-lwc-app demo-app

Once you run the above command, it asks you for a affirmation for the next parameters. For now, let’s simply choose the default choices—we’ll discover them within the subsequent sections of this tutorial.

  • Do you wish to use the straightforward setup? Yes
  • Package title for npm demo-app
  • Select the kind of app you wish to create Standard internet app
  • Do you desire a primary Express API server? No

Once the command completes, it’s going to set up the default construction and framework in addition to its related dependencies. If every part is profitable, it’s best to see a affirmation message like this:

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

Understanding the Skeleton Project Structure

Let’s open the demo-app challenge in Visual Studio Code to know the skeleton app construction. 

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Demo app construction

The supply code for our pattern app is positioned within the src folder. The entry level for our utility is src/index.html

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

index.html

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

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

index.js

All LWC are current within the modules folder, throughout the “my” namespace.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Modules construction

For this demo-app, now we have two pre-built parts—app and greeting. The construction of every part accommodates: 

  • An HTML file that features the part’s markup for rendering
  • A JS file with the part’s enterprise logic
  • A CSS file that has the part’s styling
  • A exams listing that accommodates the part’s unit exams

Running the App Locally

It’s at all times good to run the app domestically first to verify there are not any construct points. To achieve this, execute this command:

This would launch the app on localhost:3001

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Local execution

You can confirm it by opening https://localhost:3001 in any browser. It ought to present this web page.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Local verification

Hosting an LWC App on Github Pages

Now that we’ve run our LWC demo app domestically, let’s transfer to the following step: Github Pages app internet hosting. This is a static website internet hosting service which might instantly serve recordsdata from a Github repo. 

To achieve this, run the construct command outlined within the package deal.json file.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Build command

Running

npm run construct

will present a affirmation that the construct has been efficiently accomplished.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Build success

This will create a dist sub-folder within the challenge. In it accommodates the recordsdata to be deployed on Github Pages.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

dist folder

Now that we’ve constructed the app, let’s have a look at how we deploy it to Github Pages. While there are a number of methods to prepare file branching on Github pages, let’s go together with the best method for now—we’ll push our recordsdata to the primary department.

First, create a public repo on Github. 

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Create a brand new repo

Once the repo has been created, push the recordsdata within the dist listing to your repo through the use of the next instructions:

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Steps to push code to repo

Once the recordsdata have been pushed efficiently, it’s going to present the next message:

Enumerating objects: 3, performed.
Counting objects: 100% (3/3), performed.
Writing objects: 100% (3/3), 238 bytes | 238.00 KiB/s, performed.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/gauravkheterpal/demo-app.git
 * [new branch]      primary -> primary
Branch 'primary' set as much as monitor distant department 'primary' from 'origin'.

Enable Github Pages by accessing the settings hyperlink on the repository web page and select the primary department.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Github Pages

This will deploy your app to Github Pages. Once full, it’s going to present a affirmation message that the app has been deployed to a Github Pages URL. You can open the supplied URL in any browser, and it’s going to present the demo app.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Github Pages demo app verification

As a subsequent step, you’ll be able to automate the deployment course of utilizing 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 perceive Heroku just a little higher. Heroku is a platform as a service (PaaS) that enables builders to quickly construct and deploy internet functions. Heroku takes care of the plumbing—DevOps, scaling, and so on.—and allows you to give attention to constructing. And Heroku helps a number of programming languages, construct packs, and plugins. 

First up, we’ll deploy our demo app to Heroku with out utilizing the Express server. We selected this feature once we created the pattern utility utilizing the CLI.

Do you desire a primary Express API server? No

To deploy the app, we’ll create a Procfile within the app’s root listing. The content material of this Procfile determines the method sort and the instructions executed by the app on startup.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Procfile

Now, we’re able to deploy this app to Heroku utilizing the Heroku CLI. If you do not have Heroku CLI put in, see the steps listed right here.

The first step is to log in to your Heroku account.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Heroku login

This will open an online browser the place you may be prompted to enter your Heroku credentials.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Heroku login web page

Once the authentication is profitable, it’s going to present a affirmation message.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Heroku login success

Next, create a Heroku app utilizing the

heroku create

command. Once you are profitable, it’s going to present a affirmation message with the Heroku URL to your app.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Heroku create

You can establish the distant git endpoint to your Heroku app through the use of

git distant -v
I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

git distant endpoint identification

We’ll push our demo app recordsdata to this distant git endpoint utilizing the next instructions:

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

git commit

When you run the

git push heroku primary

command, it runs the construct script to deploy the app to Heroku. 

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

git push

Once it completes, you may be proven a affirmation message.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

git push affirmation

You can then use the

heroku open

command to open the Heroku URL to your utility. It ought to present this web page:

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Heroku occasion verification

Let’s now have a look at the opposite method for deploying a LWC app on Heroku: utilizing the Express server. When creating the app, select the choice to make use of the Express server.

  • Do you wish to use the straightforward setup? Yes
  • Package title for npm demo-app
  • Select the kind of app you wish to create Standard internet app
  • Do you desire a primary Express API server? Yes

To deploy the app, we’ll create a Procfile within the app’s root listing. 

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.
I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Express API server

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

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Serve goal

You will discover that this challenge has a file referred to as server/api.js which accommodates the next:

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

api.js

Notice that that is utilizing a unique port (3002) than the built-in Express server port (3001) utilized in server.js

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

server.js

The key distinction right here is that api.js serves up the APIs whereas server.js helps the backend content material. To make issues easy, we make the next modifications in api.js in order that it serves each APIs in addition to the static content material.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

api.js

This ensures that non-API endpoint calls are nonetheless rendering index.html whereas the API endpoint calls nonetheless work like earlier than. We then modify the “serve” goal to run the api.js.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

serve goal

Once that’s performed, the remaining steps are precisely the identical as within the earlier part. Use the

heroku create

command to create your Heroku app. It will present a affirmation message with the Heroku URL to your app.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Heroku create

You can establish the distant git endpoint to your Heroku app through the use of

git distant -v
I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

git distant endpoint

We’ll push our demo app recordsdata to this distant git endpoint utilizing the next instructions:

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

git commit

When you run the

git push heroku primary

command, it runs the construct script that deploys the app to Heroku. 

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

git push

Once it completes, a affirmation message is proven.

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

git push affirmation

You can then use the

heroku open

command to open the Heroku URL to your utility. It ought to present this web page:

I run Dev Spotlight - we write tech content material for tech corporations. Email at michael@devspotlight.com.

Heroku occasion verification

Conclusion

In this tutorial, we walked by means of the method of constructing a easy demo app utilizing LWC, internet hosting it on Github Pages, and deploying it to Heroku with and with out an Express server. In future tutorials, we’ll discover different points of LWC improvement and utility internet hosting in additional element. Stay tuned!

Tags

Join Hacker Noon

Create your free account to unlock your customized studying expertise.