Setup local project to develop lightning web component on Heroku

heroku-salesforce-integration

Heroku, the word that is trending these days in salesforce world. All salesforce admins and developers are familiar with Lightning platform (which is part of Salesforce mutli cloud platforms). With heroku acquisition, we have a new platform (Platform as a Service (PaaS)), which brings the ability to extend even further with open source languages and frameworks like Node.js, Ruby on Rails, Django, Python & etc.

It is also possible to extend your lightning web components to work on heroku and work seamlessly with Saleforce.

In this post, we will discuss about the step by step procedure to setup your project to extend lightning web components on Heroku.

Prerequisites

Step 1: Setup project folder

  • Create a local folder in your computer and open with Visual Studio Code
  • Open a new terminal (Terminal > New Terminla or Ctrl+Shift+~)

Step 2: Install lwc app

npx create-lwc-app conference-app

npx is a command to install a package locally on a certain project folder – in this case the app is conference-app.

This command takes sometime to install all the dependent packages locally. It may take around 60-80seconds.
After that the wizard will ask you if you want to run in simple mode. You can answer all the questions by clicking on [Enter]

To create lwc app

If you are getting any error with npx command, that is most likely either you did not install the node.js or your system user name has a space.

error: EPERM: operation not permitted, mkdir
If you get this error, it means your path has a space esp. your user name. checkout this aricle to fix this issue

Step 3: Verify the app locally

Change the directory to new app and run the app locally.

cd conference-app
npm run watch

Once you execute these commands from terminal, you will get the following result.

It means that your server is listening at port 3001. If you go to http://localhost:3001 would see the Hello, means your app is running.

lwc app in local server

To exit from the local server, enter CTRL+C and enter Y to terminate from the job.

Step 4: Create Procfile

Create a Procfile in root folder and write the following statement. (ensure there are no typo errors)

It must be named as Procfile (no Procfile.txt and etc) and it must be under root folder of your app. In this case conference-app

web: npm run serve

Procfile is used to execute the commands by the app on spinning of heroku server.

Read this article for details.

Step 5: Create Heroku developer account

  • Sign up for free heroku dev account to test this app
  • Once sign up is completed, authenticate with heroku CLI.
heroku login

It will take to a page to authorize the app with CLI, just allow it.

heroku login – authorize the heroku app with heroku CLI

Step 6: Create heroku app using CLI

Create the heroku app by executing the following command in the terminal.

heroku create <YOUR APP NAME>

Example: heroku create conference-auraenabled

You can also execute without giving name, heroku generates its own name and provide the app URL
command : heroku create

With this, you should see a herokuapp URL and repository URL. Copy this and paste it somwhere which will be used in next step.

You can also enter this URL in browser to look the heroku app with welcome note.

Step 7: Commit changes locally

Execute the following commands to initialize and commit the changes local repository

git init
git add .
git commit -m "Intial Commit"

Add remote URL by executing the following command

git remote add <remote name> <repo url copied from Step 6>

example: git remote add auraenabled https://git.heroku.com/conference-auraenabled.git

Step 8: Deploy to heroku

Enter the following command to deploy to the master branch of the Heroku remote.

git push heroku master

It takes few seconds to deploy your local repo to heroku and start the app.

Step 8: Verify your changes.

Once it is done, enter the following command to open the herokuapp. Alternatively, you can also manually open the URL in your browser.

heroku open

OR 

heroku open --app <YOUR APP NAME>
ex: heroku open --app conference-auraenabled

Thats it for now, will see how to integrate with salesforce and bring the data to heroku app in next post.

Please leave a comment if you face any issue in this installation process.

Resources:

  1. LWC OSS documentation
  2. Salesforce Event
  3. Heroku Dev Center
  4. Feature Image Credits
Please follow and like us:
error

Be the first to comment

Leave a Reply

Your email address will not be published.


*