Firebase Studio offers several ways to preview and test yourapplication during development. This includes using theApp Prototyping agentand leveraging the built-in web previewer, and the web and Androidpreviewers available within Firebase Studio workspaces.

Enable and configure your preview environment

If you use atemplate or generate your appusing theApp Prototyping agent, previews areoften already configured for you. If previews aren't already set up in yourtemplate, you can configure them in the project's Nix configuration file.

1. From your workspace, open.idx/dev.nix.

   Firebase Studio automatically generates this file when you create anew workspace and includes any applicable preview environments based onthe template you select. If the file isn't in yourFirebase Studiocode repository, create it and then set theidx.previews attribute totrue. Then, add configuration attributes, as the following example shows:

   { pkgs,...}:{# NOTE: This is an excerpt of a complete Nix configuration example.# For more information about the dev.nix file inFirebase Studio, see# https://firebase.google.com/docs/studio/customize-workspace# Enable previews and customize configuration  idx.previews={enable=true;previews={# The following object sets web previewsweb={command=["npm""run""start""--""--port""$PORT""--host""0.0.0.0""--disable-host-check"];manager="web";# Optionally, specify a directory that contains your web app# cwd = "app/client";};# The following object sets Android previews# Note that this is supported only on Flutter workspacesandroid={manager="flutter";};};};}

   For a full list of Nix attributes inFirebase Studio, seeNix +Firebase Studio.

2. Rebuild your environment:

   • From the command palette (Cmd+Shift+P/Ctrl+Shift+P), run theFirebase Studio: Hard restart command.
   • From theEnvironment config updated notification, clickRebuild environment.

   When you rebuild the environment after modifying yourdev.nix file,the preview panel appears in your workspace showing either or both ofAndroid andWeb tabs, depending on what you've enabled.

Key Point: You can preview your app in a separate browser tab by clicking theOpen in new window icon in the preview window toolbar. This pop-out link isalso useful for demoing your work in progress to a friend or colleague throughworkspace sharing. If you close a previewand want to re-open it, open the command palette and search for the appropriatepreview command.

Use app previews

Firebase Studio offers web previews on Chrome and Android emulators inFlutter workspaces that install your app on the preview environment. This letsyou test your app fully, from end to end, directly from your workspace.

Refresh previews for web and Android

Firebase Studio hooks into the hot reload functionalities of theunderlying frameworks (likenpm run start andflutter hot-reload) togive you a streamlined inner development loop.Firebase Studio providesthe following types of reloads:

• Automatic Hot Reload: Hot reloads are automatically performed when yousave a file. Sometimes known asHot Module Replacement (or HMR), a hotreload updates your app without reloading the page (for web apps) or withoutrestarting or reinstalling the app (for emulators). This approach isuseful for preserving your app's live state but might not always work asintended.

• Manual Full Reload: This option is equivalent to a page refresh (for webapps) or an app restart (for emulators). We recommend using a full reload tocapture significant changes to your source code, such as when refactoringlarge chunks of code.

• Manual Hard Restart: This option performs a complete restart ofFirebase Studio's preview system, which includes stopping andrestarting your app's web server.

All reload options are available using either the preview toolbar or the commandpalette (Cmd+Shift+P on Mac orCtrl+Shift+P on ChromeOS, Windows, orLinux), under theFirebase Studio category.

To use the preview toolbar, follow these steps:

1. Click theReload icon to refresh the page. This forces a full reload.For a different type of refresh, click the arrow next to the reload icon toexpand the menu.

2. Select the refresh option you want from the menu:Hot Reload,FullReload, orHard Restart.

Share your web preview with others

You can share your app's web preview with others for feedback by enabling accessand then sharing the direct link to the preview:

1. In the web preview toolbar, click theShare Preview Link icon, to the right of the address bar to openthe sharing menu.

2. Allow others to access your workspace, using one of these options:

   • Make preview public: Make your workspace preview publiclyaccessible. This lets anyone on the Internetreach the preview server running on your workspacewhile your workspaceis active, and until you turn off public access.

   • Manage workspace access. Share your workspace with just the peopleto which you want to give access.

     Warning: Sharing your workspace lets other users make changes to yourcode and access other private information like authenticationtokens saved on the workspace, so only share with those you trust. Learnmore atShare your workspace.

3. SelectCopy preview URL to copy a direct link to the workspace preview,which you can then send to those you'd like to get feedback from. You canalso use the QR code that appears to open your preview on your mobiledevice.

Configure autosave and hot reload

By default,Firebase Studio autosaves your work one second after youstop typing, triggering automatic hot reloads. If you wantFirebase Studio to save your work at a different interval, change theautosave setting. You can also turn off autosave.

Preview backend disconnected

You can safely disregard the "Preview backend disconnected" message.

Next steps

• Publish with Firebase.
• Monitor your app.