🧪 Testing Mini-Apps Locally
As of April 2025, developers can use their localhost URL to add their mini-apps to the Grid and test it.
To test Mini-Apps in action on Universal Everything, we need to expose our Mini-App to an URL that can be accessed by the UP Provider.
We will be using localtunnel for this purpose.
Prerequisites
- Node.js and npm: Ensure Node.js is installed on your system. If not, download and install it from the official Node.js website.
Install localtunnel
Install localtunnel globally to access it from any directory.
npm install -g localtunnel
If you encounter permission errors (EACCES), you may need administrator privileges:
sudo npm install -g localtunnel
Start Your Mini-App Server
Start your development server. For Next.js projects, you can specify a custom port:
npm run dev -- -p 8000
Your app should be running locally, typically at: http://localhost:8000
Run localtunnel
In a new terminal window (keep your app server running), execute the following command:
lt --port <PORT> // localhost port that your Mini-App is running on (e.g. 8000)
Running the command will generate a random URL. Initial visit to this URL will ask for a password, you can use your IP address to access your Mini-App.
Troubleshooting the Password Screen
When accessing your Mini-App through the localtunnel URL, users may encounter a password screen. To bypass this:
- Use your public IP address as the password
- Alternatively, retrieve your password by visiting:
https://loca.lt/mytunnelpassword - Or use this command in your terminal:
curl https://loca.lt/mytunnelpassword
If you don't have your IP address in hand, you can visit the URL on the password page to retrieve it.
Test your Mini-App on Universal Everything
Go to your Universal Profile on Universal Everything, and add your Mini-App using the generated localtunnel URL to your Grid.