Accessing localhost application over the internet - with Ngrok

Fesobi omoyemi — Wed, 27 Apr 2022 22:24:39 +0000

Sometimes it can really be frustrating when working on a localhost project that requires a secure HTTPS for it to work , for instance accessing camera and location in HTML, using Facebook and Google authentication require you to be running on a secure HTTPS, or making your application available over the internet for testing.
you can create and debug your localhost project on a secure HTTPS using Ngrok.
With Ngrok, you can make your localhost project accessible over the internet with secure HTTPS.

In this article, we'll learn how we can use Ngrok to make our localhost project available over the internet for easy testing and debugging purposes.

What is Ngrok?

Ngrok is a globally distributed reverse proxy that serves your web services from any cloud or private network, as well as your local machine. It allows developers to locally-hosted web server services over the internet. These locally hosted server will now appear to be hosted on ngrock.com subdomain
To be able to use run ngrok for your project, the project must be running on your local machine and be available at http://localhost:[any_port]

How to setup Ngrok

Before we get started we need to login to the Ngrok dashboard. If you do not have an account, you can create a new ngrok account on their website.

Step 1

From your Ngrok dashboard click on Download for Windows to download Ngrok on your computer

Step 2

After Ngrok has finished downloading, extract the downloaded file.
Open your terminal and navigate to the folder where you extracted Ngrok agent file, now run the command below to install Ngrok agent:

start ngrok.exe

Step 3

Now we need to add ngrok authtoken to the installed ngrok agent, to do this is pretty simple, go to your ngrok dashboard and click on Your Authtoken to get your token. Under command line copy the command there as shown in the screenshot below:

Step 4

In the terminal right click on it and past the copy command in the previou step, the execute it to configure your Authtoken. Once the Authtoken is configured successfully we can now test our Ngrok agent.

Step 5

You need to have localhost server running on your computer before starting ngrok: if you have local web server on your computer you can skip this step but if not create a react app with a local web server be running the commands below on another terminal:

npx create-react-app my-app
cd my-app
npm start

Once the react app has been installed, the react application will be running on localhost port 3000.

Step 6

Now that we have our local web server running we can start ngrok on the terminal with the command below:

ngrok http 3000

Note : replace the 3000 with the port that your local web server is running.

Copy the forwarding url and paste it to your browser, you’ll see something similar to the screenshot below:

Conclusion

In this tutorial, we learnt how to make localhost web servers available on the internet using Ngrok, this gives developers more control and flexibility before officially launching projects on the internal, it also makes the development process more easy.
I hope you enjoy the tutorial, thank you.

CSS 3D Flip

Fesobi omoyemi — Mon, 31 Jan 2022 16:20:51 +0000

In CSS, the transform property is used to change the coordinate space of an element, with transform property effects like rotate, skew, and translate being added to an element. Transform helps to design elements that improve user interaction with the webpage.



 .element{
      background-color:transparent;
      width:300px;
      float: left;
  transform: rotateY(180deg);
}

Transform Syntax



 transform: rotateY(angle);

When using CSS 3D flip, transform takes one function either rotateY() or rotateX() each of these functions has one parameter angle e.g 180deg, that determines what degree the element should rotate. The parameter specifies the angle of the rotation, the parament can be a positive number or negative number.
A positive number will result in a clockwise rotation and a negative value result in a counter-clockwise rotation
rotateY();
rotateY() function rotates an element around the y-axis when used with the CSS transform property. the function value can be positive to rotate the element clockwise or negative to rotate the element counter-clockwise on a y-axis direction as shown below:

.element{
background-color:transparent;
width:300px;
height: 400px;
transform: rotateY(-100deg);
}

This will rotate the element 100 degrees in counter-clockwise direction on the y-axis direction.

rotateX()
The rotateX() function is used with CSS 3D-transforms. It's used with transform property to rotate an element around the x-axis. It can be used along with rotateY() to rotate the element around the y-axes when needed.

.element{
background-color:transparent;
width:300px;
height: 400px;
transform: rotateX(180deg);
}

The above code will rotate the element 180 degrees in a clockwise direction on the x-axis direction.
transform: rotateY(180deg);

rotateY();

rotateX();

DEV Community: Fesobi omoyemi