Deploying LWC OSS Apps to Heroku With and Without Express API Server

Heroku is a platform-as-a-service offering that enables developers to build, run, and operate apps entirely in the cloud. It Supports programming languages and frameworks like Java, NodeJs, Python, and many more.

Once our App is created the process of deployment of App on Heroku is as follows. Since Heroku can host a variety of Apps written in different languages we need to tell Heroku that our app runs on NodeJs and how to start it.

For that, we create a Procfile. It is a simple text file name Procfile without any file extension and it must be created in the app's root directory within the procfile you declare the process type and the command to run.

We can create different process types like web to run web apps, workers to create background apps, clock to create scheduled apps, and many more.

We are trying to create a web app. We will use the web process type, and the command we are going to run is going to be web: npm run serve because that is the one we used to serve the build output.

We are ready to deploy the app to Heroku. There are two ways in which you can deploy to Heroku using the Heroku CLI or the Web UI. Using CLI you can either push all of your code to a Heroku Git endpoint or you can deploy a docker image. From the Web UI, you can connect your app to a GitHub Repo and trigger deployments from there.

Don't forget to check out: QRCode with LWC in Salesforce

Let’s use the Heroku CLI and Heroku Git to deploy Apps. For this first you need to install the Heroku CLI in your VsCode after that open up the terminal and type Heroku login this will take you to the login page of Heroku in the browser window.

Once the authentication is complete, you can create an app with the command heroku create. This command creates an App with a random name.

Once App is created it's going to create an endpoint for your app and a remote endpoint for Git.

You can access that endpoint by running the command git remote -v before deploying the app first add all files using the command git add..., git commit -m "commit message" after that use git push heroku main command to deploy App on Heroku.

This will generate a link upon clicking on that link you can see the output in the browser window.

Deploy LWC OSS App on Heroku with Express API Server

The process of deployment with or without Express Api service is almost the same only a little bit different in a small part of code in with Express API server.

The difference is listed below.

In the package.json file scroll down to the script section where you can see the serve command. It has two subcommands “serve-client” and “serve-api”.

Both of those scripts are running different files.

serve:client is running script/server.js, and serve:api is running src/server/api.js.

The server.js file looks exactly the same whether or not you use a custom API server because the job of this file is to serve out static content from the build directory. The logic is written in lines 15 to 19.

You will also notice that it is listening onto the port, which can either be passed as an environment variable, or it's hardcoded to 3001. Heroku randomly assigns a port number to run your app and this port number is passed to the PORT environment variable.

Now look at the api.js file it looks almost similar to server.js, but the purpose of this file is, to serve out APIs and server-side logic.

So, whenever you run the serve command, it executes both of these files (api.js and server.js) which means there are two different Express servers that are running. One of which is serving out your static content and another one is serving out your APIs.

But there is one problem that occurs when you do this both api.js and server.js try to run on the same port and you can't run two servers on the same port otherwise one of them is going to fail.

So, to overcome this problem we can combine the code from both server.js and api.js, into one file, so that there is only one express server that serves out both the static content and the APIs.

So, here I have chosen to merge the code from server.js into api.js, and the resulting code looks like this:

Check out another amazing blog by Anuj here: Call Lightning Web Component From a Quick Action in Salesforce

Here you can see that I have replaced the '*' which is used in the server.js file with a regular expression /^(?!\/api).+/ because if the request is coming to an endpoint that starts with /api, then don't execute this, and for other scenarios execute this.

when you say app.use* that means any HTTP request that comes to the server, is going to send out static files.But,api.js file is also serving out API endpoints that's why we have to replace it '*' with regular expression.

And the last modification was made in the package.json file in which the server script is still trying to run both the sub-scripts that are serve:client and serve:api. So, we need to modify it to serve scripts that run only one file at a time.

We can do that by copying the serve:api command and paste it into the serve script, So whenever the serve script is going to run it’s only executing server/api.js only.