Nextjs

architect beginner Ci Circleci code-skills Code Design Continuous Integration Cs css Data Developers devops error front end Front End Development functional programing Hooks how-to howtos Iterm javacsript JavaScript Js list-of nextjs NextJS-tutorialm nextjs beginners nodejs opinion platform plugin Productivity React reactjs-basics remix rendering scss security Software Engineering solidjs typescript Vietnam vite web development what-is

10/22/2024

Nextjs Ngrok

You develop nextjs on yor local machine and you want to share the project with someone and show them your progress and how the project is going so far, the best way to do it is to run the project on your ip and provide that to the relevant people.

limitations: with this setup you’ll need to access your machine from the same network of wifi/internet! otherwise this setup doesn’t work (so this is good for your office or home sharing experience – to make your dev site access to the world you can do tunneling with service like ngrok, see below.

When you do it?

development, when you want to test a local running script/api/webhook and need a url for your local server development
when you done a task for a client and want to share your client that you’ve made a progress.
when you integrate with 3rd party app and develop the proejct with their remote API.

How to

first get your local ip:

ifconfig | grep "inet " | grep -v 127.0.0.1 | cut -d\  -f2

copy your ip, we will config it in a moment to a regular domain url

start by configure your host file on your macos machine:

sudo vim /etc/hosts

in here you wanna add your current ip to some fake domain, and that fake domain is a url you can send to your client to test the project or to a webhook to test:

# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost

999.999.999.99 mydomain.com

of course change the fake ip to your machine ip and the domain to whatever you want (preferly your production name sub domain. e.g: “local.lior.live”).

Start nextjs with ip

you might need to restart your current nextjs dev server with your direct local ip, to do so use the “h” flag when you run your nextjs dev server:

npm run dev -- -H 999.999.999.99

Troubleshoot

Here are some common problems when attempt to do the above setup:

it could be that your network configuration has “client isolation” enabled that need to be changed.
it could be that you took the wrong ip (public one vs local one)
it’s common that firewall might block a lot of incoming request so others won’t be able to access your local development.

Tunneling

tunneling allow a real world server (a server that is expose to the internet) to access your local server via SSH connections. which means your local server is tunneled to the public internet world via a 3rd party, in the following case we’ll use ngrok. but there are other alternatives.

pre-requiremets

you need account at ngrok.com
you’ll need authenticator (like google authenticator) for 2FA

follow the ngrok installation process:

brew install ngrok/ngrok/ngrok

than add your auth token:

ngrok config add-authtoken your_token

once done, all you need to do is to run your own nextjs (or any other project) and run ngrok:

ngrok http http://localhost:8080

if you done everything right, you’ll get a url that is tunneling for your localhost dev server and can be shared cross devices or to anyone with internet access – good luck!

limitations: ngrok can be used for webhooks, but when you create a “webhook destination” for whatever service you are using (sentryio, paddle, transmit security) you’ll need to use the newly (mostly) created key and add it to your configuration (whenever you create a webhook for most services you’ll also get a key) and the url will be of course of the above XXX.ngrok-free.app/api/webhook (for example).

Summary

if non of the above works than i’d recommend different approach: incremental development (and deployment), using feature flag service that will hide parts of an api. or creating a new “versioning api” so that you can have a public api of development (in production) but in a safe manner (e.g call a public api beta version and work with it) but it needs protections and security and safety measurements to be done and the bigger the company and business is the larger the risk in here and require more safety!

Lior Amsalem

Lior Amsalem embarked on his software engineering journey in the early 2000s, Diving into Pascal with a keen interest in creating, developing, and working on new technologies. Transitioning from his early teenage years as a freelancer, Lior dedicated countless hours to expanding his knowledge within the software engineering domain. He immersed himself in learning new development languages and technologies such as JavaScript, React, backend, frontend, devops, nextjs, nodejs, mongodb, mysql and all together end to end development, while also gaining insights into business development and idea implementation.

Through his blog, Lior aims to share his interests and entrepreneurial journey, driven by a desire for independence and freedom from traditional 9-5 work constraints.

IT

nextjs