Login into your Digital Ocean account [↗] select Functions from the left-hand menu then click on the Launch button.
Select the Nodejs:14 runtime and provide a name for your function then hit Create.
Click on the newly created function, you should then be present with a web-based code editor.
Digital Ocean provides a way to work and test your function locally but for this tutorial, we will stick to the web-based editor.
I have a ready-to-use form submission function code on GitHub [↗], go ahead and copy-paste its content into the web editor.
Going through the code you will notice a few parameters are missing [↗], all of which are Github-related, we will be creating those in the next section.
01: const gistID = '<GIST_ID>'; //https://gist.github.com/username/<GIST_ID>
02: const GitHubToken = '<GITHUB_TOKEN>'; //https://github.com/settings/tokens
03: const gistFileName = '<GIST_FILE_NAME>'; //https://gist.github.com
As mentioned at the very beginning, when a user fills out the form on our site the serverless function will be storing the contact details in a Gist. In this section, we will look at how to create a Gist.
For this you will need a GitHub [↗] account, Once you are done head over to the Gist home page [↗] to create a new Gist.
Follow the steps below to create a Gist:
.json
at the very end of it.[]
in the content section.Once the Gist is created note the ID at the end of the URL in the address bar right after your username, this is your gistID ie: https://gist.github.com/username/{GIST_ID}
.
Also, the {filename}.json
name you provided will be your gistFileName value.
With those two out of the way, the only thing remaining is our GitHubToken value.
To generate a Github token head over to your GitHub settings page [↗]
Following the steps below to generate your token:
This should generate a new token, and that is your GitHubToken
Now that we have all three values, you can go back to the function on Digital Ocean and set them.
Click on the save button to persist the changes.
You can now go ahead and implement your client-side code to start sending requests to your function. I have put together a sample form [↗] you can use.
You will need to replace <FUNC_URL
[↗]> with your functions web URL, which you can copy from the text box right above the web-editor window.
You also need to make sure Web Functions is enabled from the settings tab.
And that's about it!
Here is another article you might like 😊 "Diary Of Insights: A Documentation Of My Discoveries"