LocalTunnel
Understand the .env
File
In your Next.js project, the .env
file holds crucial environment variables.
A key variable is NEXT_PUBLIC_MGNL_HOST
, which points to your Magnolia CMS instance, ensuring your Next.js application can communicate with Magnolia.
Set NEXT_PUBLIC_MGNL_HOST
-
NEXT_PUBLIC_MGNL_HOST
should be set to the URL of your accessible Magnolia instance. -
For local development, typically use
http://localhost:8080
. -
For the Vercel deployment, we will need to use a public URL for your Magnolia instance.
Expose Your Localhost with LocalTunnel
Since you want to deploy to the cloud but your Magnolia instance is running on localhost, you need a way to expose your localhost to the internet. LocalTunnel is a tool that enables you to do this easily.
-
Go to LocalTunnel.
-
Install LocalTunnel.
npm install -g localtunnel
-
Ensure your Magnolia instance is running, typically at
http://localhost:8080
. -
Run the following in your terminal to expose
localhost
to LocalTunnel.lt --port 8080 (1)
1 Where 8080
is your desired port.LocalTunnel will provide a URL, which will be your localhost Magnolia instance accessible from anywhere. We will call this your LocalTunnel URL. Go to the LocalTunnel URL in your browser to complete the final steps.
-
Complete the process by following the instructions on the LocalTunnel’s website or read the section below.
LocalTunnel
Access your Magnolia instance on the public domain by obtaining your local IP address.
-
Go to https://ipv4.icanhazip.com to display your public
IPv4
address. -
Copy the displayed IP address for the next step.
-
Return to your LocalTunnel URL page.
-
In the
"Endpoint IP:"
field, paste your copied IP address.You’ll be redirected to your Magnolia instance on the public domain. It will be something like https://chilly-zoos-rule.loca.lt
this will be used in the next section by replacing the YOUR_LOCAL_TUNNEL_URL value assigned to the NEXT_PUBLIC_MGNL_HOST. -
Click Run the Web update on the author instance Log in upon reaching your Magnolia instance, typically using the
superuser
account.