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.

  1. Go to LocalTunnel.

  2. Install LocalTunnel.

    npm install -g localtunnel

  3. Ensure your Magnolia instance is running, typically at http://localhost:8080.

  4. 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.

  5. 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.

  1. Go to https://ipv4.icanhazip.com to display your public IPv4 address.

  2. Copy the displayed IP address for the next step.

  3. Return to your LocalTunnel URL page.

  4. 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.

  5. Click Run the Web update on the author instance Log in upon reaching your Magnolia instance, typically using the superuser account.

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia Vercel App docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules