Local Studio

The Local Studio is a companion app to the Novu Framework SDK. Its goal is to provide a local environment that lives near your code.

To launch the Local Studio locally you can run the following command in your terminal:

npx novu@latest dev

Learn how to use the novu CLI package and the available CLI flags to use for customization

The Dev Studio will be started by default on port 2022, and accessible via: http://localhost:2022

After successfully connecting the Studio to your local Bridge Endpoint, you will be able to preview in real time any workflows and content defined in your code. This is ideal for quick prototyping, debugging, styling, and adjusting your workflows before syncing them to Novu Cloud.

Control and Payload forms

You can quickly modify the Step Controls and workflow Payload to preview your workflow’s different states. This is helpful to quickly debug how the email will behave in case of a missing control, or iterate more complex content structures.

Syncing State

Syncing state to your Production or Development environment in Novu, is recommended to do via your CI pipeline. However, a sync can be made using the Local Studio for quick experimentation.

Click on the Sync button at the top right corner of the navigation bar. This will open the Sync State modal.

Tunnel URL

By default the Novu CLI will automatically create a tunnel URL connected to your local computer. This tunnel will proxy any workflow engine requests on our cloud to your local machine.

Connect Studio to your local server

By default, the Studio will connect to the Novu Bridge Endpoint running on your local machine at http://localhost:4000/api/novu if your server is running on a different port or the workflows are served from a different endpoint path you can use the following optional parameters to connect:

npx novu@latest dev --port <YOUR_SERVER_PORT> --route <YOUR_NOVU_ROUTE_PATH>

• YOUR_SERVER_PORT - This accepts the port number where your server is running. Defaults to 4000.
• YOUR_NOVU_ROUTE_PATH - This is the mounted path of the framework serve function. Defaults to /api/novu.

Novu CLI flags

The Novu CLI command npx novu@latest dev supports a number of flags:

Flag	Long form usage example	Description	Default value
-p	—port <port>	Local bridge application port	4000
-r	—route <route>	Bridge application route	/api/novu
-o	—origin <origin>	Bridge application origin	http://localhost
-d	—dashboard-url <url>	Novu cloud dashboard URL	https://dashboard.novu.co
-sp	—studio-port <port>	Local Studio server port	2022
-t	—tunnel <url>	Custom tunnel url	null

Example: If bridge application is running on port 3002 and Novu account is in EU region.

npx novu@latest dev --port 3002 --dashboard-url https://eu.dashboard.novu.co

FAQ

Running Studio without a tunnel

It is possible to run the Studio without generating the default tunnel by passing the --tunnel flag with the URL of your application.

npx novu@latest dev -t http://localhost:4000

While the preview will work, you won’t be able to test your notifications by the triggering them from the Studio UI.