DEV Community: Mohamed Nadir Kerroum

How can Ngrok help me expose my local server worldwide?

Mohamed Nadir Kerroum — Thu, 11 Apr 2024 10:39:12 +0000

Hi, this is CoderNadir in another post where I'll share with you how to expose your local server to the world!

What do I mean by exposing it to the world?
I mean share a link to anyone by running a (Node/Nestjs/...) server in your local machine!

The question now is how?
Simply by the help of Ngrok

For this tutorial let me explain to you what is Ngrok based on what we'll use it for, and if you want to read more about it then follow this link:
Ngrok overview

You can think of Ngrok like a hosting service where you can put your app and it will be public for access by anyone, but not really 😒. so keep reading and you'll get the idea clearly!

Note: it's only free for non-commercial use. see pricing
In this tutorial I'll be using Windows 11 as OS

Now let's jump into the important part from this tutorial!

1- Create an account here.
2- Chose your OS and download the ZIP folder!

3- Go to your downloads and extract the zip file! once you'll extract it, you'll be popped up by a window asking you where you want to extract the file! remove the path and paste this:
C:\ngrok
Now to navigate to that extracted file we should go to:
C:\ngrok and you'll find this file:

Now if you double click this file you'll open a Ngrok window with some details:

You've made it right! (really 😒) not yet!

4- Now we want to be able to run ngrok commands from the command line without the need to navigate to app folder and run it, therefore we'll need to set up the system environment.

Search Edit the system environment variables in your settings and open it!

Then click:

Next, Select Path and click edit

Click New then paste the path to your ngrok app in our case it's C:\ngrok then close all the opened windows by clicking ok button

Now you can use ngrok from the command line, so open it and type: ngrok and it should open a Ngrok window with some details!

Note if you want to test it in your Code Editor like (VSCode) you might need to close it and open it or even restart the PC!

We need another configuration before start using it, so hang on there 😀

Go to your ngrok -dashboard_ and under the section:
Getting started => Your Authtoken
copy your authentication token, paste it in the command line and hit enter, Command:
ngrok config add-authtoken <YOUR_AUTH_TOKEN>

Hooray! now we can start using it 🥳

I'll assume that you already have a local server running, let's say on port 3000, cool!

5- Now running the server with Ngrok
Your ngrok command should be:
ngrok http 3000

You'll see some details about your server, let's say your online app 😉
(1 is your public URL server, 2 is your forwarded local server)

AND BOOM 🚀 Now you know how to expose your local server to the world! 🥳

BUT HOLD ON!
WHAT IF YOU WANT TO ALSO EXPOSE YOUR DATABASE? 🤔
remember that your account is free and you're limited to only one forwarded server!

Let me know in the comments below if I should create the second part without the need to pay! 😉🤑

Catch you next time! (second part 😅)

Integrate Web3Forms in Angular

Mohamed Nadir Kerroum — Sun, 07 May 2023 13:24:04 +0000

Hi and welcome to my blog post where we are going to talk how to integrate Web3Forms in your Angular application.

Why Web3Forms?

I'm going to use Web3Forms for the needlessness of a back-end server, so no need to set-up a back-end API to send our emails.

prerequisites

Web3Forms access key.
Angular basics (Services, TemplateForms).

Let's create our access key:

first we have to submit the email that we are going to receive emails on.
once we submit it and finish the steps, we are going to receive the access key in our email that we registered with.
now register your access key here 👉 Web3Forms

Let's move to the code part:

I'm going to assume that you already initialized your app and you have your component that has the form.

Create a service (mail)

ng generate service services/mail

define a method called (sendEmail()) that will return a Promise and accept a parameter (formData) that has type of (FormData).
in the method we are going to return the Promise of the built in function (fetch()), which is accepting 2 arguments:

API endpoint: https://api.web3forms.com/submit.
Object with 2 properties:
{ method: 'POST', body: formData }

our service mail method should look like:

that's it for the mail service.

Now let's take a look at the HTML form: I splitted the Form HTML code into 2 images for better view

As you can see we are assigning the values of the inputs to an object in our component class (contactFormValues) with the help of template forms, and we have a button being used to submit the form as well as we have (ng-container) and (ng-template) inside the button tag to display whether the text (send) or show a spinning animated (icon) that indicates the form is being submitted.
Let's take a look at the component class properties and methods:

Class properties:

Class methods:

Class properties explanation:

showAlert: boolean = false; to display alert message (success or fail).
alertMessage: string = ''; to hold the alert message.
onSubmit: boolean = false; to set and track submit state.
iconLoad = faArrowRotateForward; to define and rename the icon from (fontAwesome library).
contactFormValues

contactFormValues = {
    name: '',
    email: '',
    body: '',
  };

to hold the inputs' values with the help of the template forms of Angular.

Class methods explanation:

hideAlert() to hide the alert message after 5 seconds.
submitEmail(contactForm) an async function that accepts an instance of the NgForm to handle the submit form and in this method I want to explain 3 parts from the method:

creating a formData instance and add values because it is the way that Web3Forms accepts the form.

formData.append('name', this.contactFormValues.name); add input value (name) from template to formData, follow the same step to add other inputs' values.

grab your access key from email you received earlier and add it into the environment variables, in my case I called it (form_access_key) see example below:

formData.append('access_key', environment.form_access_key);

formData.append('subject', 'Email Support From Your Site'); to set subject text.

formData.append('from_name', 'Contact Notification'); to set a name for the form.

try | catch blocks, in the try block we are calling the mailService.sendEmail() method to submit the form and in case the form was successfully submitted we show a success message and reset the values to null by the help of the instance NgForm that has reset() method, in our case it is contactForm.reset(), and in case there is an error we added a guard clause and inside its block we throw an error to force the code to jump to the catch block and show an error message.

and at the end of the method we reset onSubmit property to false, showAlert to true and call the hideAlert() method.

Here we go!
now we set everything up you can go and give it a try.
that's it for today's post, thanks for reading and I hope you find it helpful!
let me know your thoughts & opinions in the comments section!

website 👉 Web3Forms home page
Docs 👉 Web3Forms docs link

Follow me on social media: