Rate this page:
Tunneling runs your app code locally on your machine via the Forge CLI.
Tunneling is limited to the default development environment, and you can only tunnel one app at a time.
You can start a tunnel for any app that has been deployed and installed on to a site. To start a tunnel for your app, run the following command in your CLI:
1 2forge tunnel
You'll see output similar to this:
1 2Running your app locally with Docker. The tunnel displays your usage from everywhere the app in the development environment is installed. Press Ctrl+C to cancel. Checking Docker image... 100% Your Docker image is up to date. Reloading code... === Running forge lint... No issues found. === Bundling code... App code bundled. === Snapshotting functions... No log output. App code reloaded. Listening for requests...
Messages logged to the console will look similar to this:
1 2INFO 17:34:04.955 Count of objects in test array: 0
Tunneling also helps you debug your app in two ways:
console.log()
statements in your code,
you can see the output in the Forge CLI as the code executes.When running forge tunnel
with a UI kit app, any changes to your source
code triggers a rebundle from the Forge CLI. Once the rebundling is completed successfully, you can
see your changes by refreshing the page that your app is on.
When running forge tunnel
with a custom UI app, the Forge CLI serves
the content from the path
directories specified in each resource
that's defined in your manifest.
This means that if your static assets require rebundling, you need to bundle them before refreshing
the page that your app is on. See here for more details on resource
declarations for custom UI apps.
While forge tunnel
lets you avoid redeploying your custom UI app to test changes, you have to
manually bundle it for each change you make. To solve having to do this, popular tools, such as
create-react-app can automatically reload your app each time
you change the code. These tools usually host their own server on a specific port.
For example, running npm start
with create-react-app
starts a server at http://localhost:3000
by default. The Forge CLI allows you to proxy tunnel requests to these servers, enabling features,
such as hot-reloading while developing your custom UI apps.
To connect a server to forge tunnel
, first identify the port that the server is hosted on.
In the above example, the port would be 3000
. Then, add the following to your manifest.yml
file,
under the resource
your server is hosting:
1 2tunnel: port: <YOUR_PORT_HERE>
For example, a resources
definition might look like this:
1 2resources: - key: main path: static/hello-world/build tunnel: port: 3000
Once a port has been added to a resource definition, running forge tunnel
causes the Forge CLI
to bypass the path
directory, and instead proxy the request to http://localhost:<port>
.
You can then run forge tunnel
, and start your server by running npm start
. You can then see
the assets served by your local server by refreshing the page that your app is on. If your server
supports hot-reloading, you no longer need to refresh the page to see updates when you make
changes to the code.
When running forge tunnel
with non-UI functions, such as
custom UI resolvers and
web triggers, any changes to your source
code triggers a rebundle from the Forge CLI. Once that rebundling is completed successfully,
you can see your changes reflected in the next invocation of the function.
The forge tunnel
command accepts a --debug
flag that will allow you to perform remote debugging
in Chrome's DevTools and will pause execution when a debugger;
statement is found. The debugger;
is a special statement that invokes any available debugging
functionality, such as setting a breakpoint. The debugger;
statement will be ignored if you're
not tunnelling in debug
mode.
When you run tunnel
with the --debug
flag, you'll be prompted with a message similar to the
following:
Chrome inspector URL (add "debugger;" statement to your app to pause): devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:8000
Opening the provided inspector URL, your app will now pause on any debugger;
breakpoints you add
in your code.
This is a great way to interactively debug your application within the context of the breakpoint.
forge tunnel
and see their changes reflected in real-time.forge logs
. This is because your
app code runs locally while tunneling. forge logs
only shows information for your deployed app,
not locally running code.manifest.yml
file, you must deploy the app with the latest manifest.
This is needed for the tunnel to pick up the changes.The Forge tunnel is based on Docker, which may cause issues.
Rate this page: