Serverless is perhaps one of the most exciting and fastest-growing technologies out there today. Just imagine the ever-rising increase in the number of incredible tools and platforms that make it possible for us to run our "entire application" on our local machines.
And doesn't it make the development process a whole lot easier? Since you can now play around with your application as you build it without having access to the Internet all the time. That's like a dream come true for so many developers out there. Isn't it?
Being a developer for quite some time now, I prefer to code locally on my pc using my favorite code editor with the dark mode on. And, I am quite certain that I am not the only one to fancy that!
Now the question is, can we do the coding of serverless functions in our favorite code editor? Well, the answer is yes. All you ought to do is set up your design tool files in HubSpot on your local setup with CLI commands, and you can operate locally from your own code editor.
How? I will show you, but before that, let's see when to use serverless, and what the HubSpot CLI command can do for you.
Why use HubSpot CLI?
- The HubSpot CLI (Command Line Interface) helps you connect your local setup to HubSpot, permitting you to utilize version control, your preferred text editor, and many other web development technologies while developing on CMS Hub.
- The HubSpot CLI enables you to upload, retrieve, and view files from your local file system. This means you will have access to the local copies of your assets. And since you have the code locally, you can use the code editor of your choice.
- Besides, you can use build tools and push your code to a git repository.
- Additionally, the CLI offers helper functionality that can speed up your development. For instance, the hs create command provides you with ways to create various types of assets locally quickly, be it modules or creating a theme using Boilerplate.
Well, that's a whole lot of reasons to do the local setup of serverless functions using the HubSpot CLI command. Right?
Keep reading to learn how to install HubSpot CLI, fetch a project from your HubSpot account, upload changes back to the Design Tools, and execute serverless functions.
Steps to setup Serverless Functions Locally
- To start working locally, we need the HubSpot tools installed globally on our PC with npm.
- To install the HubSpot tools globally, go to your command line, and run the command below.
- npm install -g @hubspot/cli
- After installing HubSpot globally, we will create a connection with our HubSpot account to work with it locally.
- To create a connection with the HubSpot account, follow the below-given steps.
- Run the following command,
- hs init
- After hitting enter, you will see a new file, "hubspot.config" is generated in your current folder, and you will be asked to get access to the personal access key in cli.
- When you press enter here, a new browser tab will open, and you will be asked to select the HubSpot portal. Here you will choose the portal that you want to use locally.
- After selecting your portal, click on continue, and you will be redirected to the personal access key page.
- Here click on show, and then copy the key. Once it's copied, you need to go to your cli, right-click on it and paste it over there. You can also use the shift +ins shortcut to paste it in cli.
- Once you paste the key, hit enter, and you will be asked for a unique account name.
- Write any name and hit enter. My unique account name is going to be "serverless." You will see a success message if you have done everything right.
- You can check your "hubspot.config file." It is updated with a personal access key and your portal id.
- Now we can start working locally.
Fetching the HubSpot Project
- We can fetch the project created inside the design tool manager to local by the following command.
- hs fetch --account=<name> <src> [dest]
- Here we are trying to fetch the "serverless.functions" folder with our fetch command. Our command will go like this:
- hs fetch --account=serverless serverless.functions
"Serverless" is the unique account name that we have provided while creating the connection and "serverless.functions" is my "src" path which I want to download on my local. I have not passed the "dest" argument. It would be downloaded by default in the same folder from where I am generating my command.
- Now you can make changes to these files and upload them again back to the HubSpot design tool manager to see the changes.
- I have made changes in our js file where our backend code exists.
- To execute this file change, we can either upload it to HubSpot and then run it or run it locally. Here, we will do both.
Upload the File to HubSpot and see the Changes
- We need to write the upload command to upload our changed files to HubSpot.
- hs upload --account=<name> <src> <dest>
- In our case, we will write: hs upload --account=serverless serverless.functions/demo.js serverless.functions/demo.js
- Finally, the upload is done.
- Check the file in HubSpot. You can see the changes when you execute this function.
Watch the video to learn more about the local setup of serverless functions.
- Besides, we can use the watch command to see the update on the HubSpot account simultaneously.
- hs watch --account=<name> <src> <dest>
- In our case we will write,
- hs watch --account=serverless serverless.functions serverless.functions/demo.js
Here the first argument, "serverless.functions" refers to our local functions folder, and the second argument, "serverless.functions/demo.js" refers to our live HubSpot account file.
- When this command is on, whatever changes you make in the local file it will automatically get reflected in your HubSpot account file .
Execute Serverless Functions File locally by Server Command
hs functions server <path>
- In our case, we will simply write,
- hs functions server serverless.functions
- After hitting this command in cli, you will see a success message, and a link will automatically get generated of your serverless function.
- Ctrl+click on it, and it will open in the browser window.
Watch the video to find out more about the local setup of serverless functions on HubSpot.
Watch the video to learn how to upload changes back to the Design Tools.
Wrapping Up
That's it, folks! Now you know how to operate locally within your favorite code editor. This will definitely improve your efficiency.
Serverless functions open up a whole new world of opportunities for your development team. HubSpot CLI, being one of the most popular serverless function examples, making them one of the most sophisticated features of HubSpot CMS Hub Enterprise.
Do reach out to us for more information on HubSpot CMS Hub or discuss serverless functions in-depth.
Editor: Richa Sharma