Skip to content

Docs(Hot Reload): fix broken links and refactor get started to seperate file #19926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
547 changes: 0 additions & 547 deletions doc/articles/features/working-with-xaml-hot-reload.md

This file was deleted.

7 changes: 7 additions & 0 deletions doc/articles/includes/getting-help.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,10 @@ uid: Uno.Development.GettingHelp
>
> If you are experiencing issues with Uno Platform, please visit our [GitHub Discussions](https://github.com/unoplatform/uno/discussions) or [Discord Server](https://www.platform.uno/discord) - where our engineering team and community will be able to help you.
>

## See Also

- [Uno Platform features and architecture](xref:Uno.GetStarted.Explore)
- [Uno Platform App solution structure](xref:Uno.Development.AppStructure)
- [List of views implemented in Uno](../implemented-views.md) for the set of available controls and their properties.
- You can head to [How-tos and tutorials](xref:Uno.Tutorials.Intro) on how to work on your Uno Platform app.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
uid: Uno.HotDesign.GetStarted.CounterTutorial
uid: Uno.Studio.HotDesign.GetStarted.CounterTutorial
---

# Create a Counter App with Hot Design®
Expand All @@ -25,8 +25,8 @@ This tutorial will guide you through using Hot Design to create a simple counter
>
> - Hot Design is now available on all platforms in beta, with the Desktop platform (`-desktop` target framework) currently offering the most stable and reliable experience. Other platforms are still undergoing stabilization. See the list of [known issues](https://aka.platform.uno/hot-design-known-issues).
> - Hot Design does not support C# Markup and is only available with XAML and .NET 9. Additionally, Hot Design is not supported for the WinAppSDK target framework at this time.
> - Hot Design relies on [Hot Reload](xref:Uno.Platform.Studio.HotReload.Overview) for updates, so be sure to check the [current support for your OS, IDE, and target platforms](xref:Uno.Platform.Studio.HotReload.Overview#supported-features-per-os) before testing.
> - Your input matters! Share your thoughts and help us improve Hot Design. [Find out how to provide feedback here](xref:Uno.Platform.Studio.Feedback).
> - Hot Design relies on [Hot Reload](xref:Uno.Studio.HotReload.Overview) for updates, so be sure to check the [current support for your OS, IDE, and target platforms](xref:Uno.Studio.HotReload.Features#supported-features-per-os) before testing.
> - Your input matters! Share your thoughts and help us improve Hot Design. [Find out how to provide feedback here](xref:Uno.Studio.Feedback).

## Set Up Your Environment for Hot Design

Expand Down Expand Up @@ -93,7 +93,7 @@ The template will create a solution with a single cross-platform project, named
### [Command Line](#tab/cli)

> [!NOTE]
> If you don't have the Uno Platform dotnet new templates installed, follow [these instructions](https://aka.platform.uno/dotnet-new-templates).
> If you don't have the Uno Platform dotnet new templates installed, follow [these instructions](xref:Uno.GetStarted.dotnet-new).

From the command line, run the following command:

Expand Down
8 changes: 4 additions & 4 deletions doc/articles/studio/Hot Design/hot-design-getstarted-guide.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
uid: Uno.HotDesign.GetStarted.Guide
uid: Uno.Studio.HotDesign.GetStarted.Guide
---

# Getting Started with Hot Design®
Expand All @@ -17,8 +17,8 @@ Use this guide to set up Hot Design and start creating and refining user interfa
>
> - Hot Design is now available on all platforms in beta, with the Desktop platform (`-desktop` target framework) currently offering the most stable and reliable experience. Other platforms are still undergoing stabilization. See the list of [known issues](https://aka.platform.uno/hot-design-known-issues).
> - Hot Design does not support C# Markup and is only available with XAML and .NET 9. Additionally, Hot Design is not supported for the WinAppSDK target framework at this time.
> - Hot Design relies on [Hot Reload](xref:Uno.Platform.Studio.HotReload.Overview) for updates, so be sure to check the [current support for your OS, IDE, and target platforms](xref:Uno.Platform.Studio.HotReload.Overview#supported-features-per-os) before testing.
> - Your input matters! Share your thoughts and help us improve Hot Design. [Find out how to provide feedback here](xref:Uno.Platform.Studio.Feedback).
> - Hot Design relies on [Hot Reload](xref:Uno.Studio.HotReload.Overview) for updates, so be sure to check the [current support for your OS, IDE, and target platforms](xref:Uno.Studio.HotReload.Features#supported-features-per-os) before testing.
> - Your input matters! Share your thoughts and help us improve Hot Design. [Find out how to provide feedback here](xref:Uno.Studio.Feedback).
>
> [!IMPORTANT]
> If you're new to developing with Uno Platform, make sure to set up your environment by [following our getting started guide](xref:Uno.GetStarted).
Expand Down Expand Up @@ -189,4 +189,4 @@ You can interact with the canvas using the following mouse and keyboard shortcut

### Tutorial

For a step-by-step tutorial on getting started with Hot Design, refer to the [Create a Counter App with Hot Design®](xref:Uno.HotDesign.GetStarted.CounterTutorial) tutorial.
For a step-by-step tutorial on getting started with Hot Design, refer to the [Create a Counter App with Hot Design®](xref:Uno.Studio.HotDesign.GetStarted.CounterTutorial) tutorial.
14 changes: 7 additions & 7 deletions doc/articles/studio/Hot Design/hot-design-overview.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
uid: Uno.HotDesign.Overview
uid: Uno.Studio.HotDesign.Overview
---

# Hot Design® Overview
Expand All @@ -9,8 +9,8 @@ uid: Uno.HotDesign.Overview
>
> - Hot Design is now available on all platforms in beta, with the Desktop platform (`-desktop` target framework) currently offering the most stable and reliable experience. Other platforms are still undergoing stabilization. See the list of [known issues](https://aka.platform.uno/hot-design-known-issues).
> - Hot Design does not support C# Markup and is only available with XAML and .NET 9. Additionally, Hot Design is not supported for the WinAppSDK target framework at this time.
> - Hot Design relies on [Hot Reload](xref:Uno.Platform.Studio.HotReload.Overview) for updates, so be sure to check the [current support for your OS, IDE, and target platforms](xref:Uno.Platform.Studio.HotReload.Overview#supported-features-per-os) before testing.
> - Your input matters! Share your thoughts and help us improve Hot Design. [Find out how to provide feedback here](xref:Uno.Platform.Studio.Feedback).
> - Hot Design relies on [Hot Reload](xref:Uno.Studio.HotReload.Overview) for updates, so be sure to check the [current support for your OS, IDE, and target platforms](xref:Uno.Studio.HotReload.Features) before testing.
> - Your input matters! Share your thoughts and help us improve Hot Design. [Find out how to provide feedback here](xref:Uno.Studio.Feedback).

Welcome to **Hot Design**, a next-generation runtime visual designer for cross-platform .NET applications!

Expand All @@ -20,11 +20,11 @@ Welcome to **Hot Design**, a next-generation runtime visual designer for cross-p

**Hot Design** transforms your live, running app into a real-time visual designer that works with any IDE on any OS. It allows you to make UI changes on the fly without restarting your app or losing state, while seamlessly synchronizing your XAML code and visual designs.

In addition, [Hot Reload](xref:Uno.Features.HotReload) works seamlessly with **Hot Design**, allowing you to see UI changes instantly without rebuilding your app. This boosts productivity, reduces iteration time, and provides real-time feedback for both visual and functional tweaks in your UI. Hot Reload also includes a visual indicator to help you monitor changes as you develop, further enhancing your workflow.
In addition, [Hot Reload](xref:Uno.Studio.HotReload.Overview) works seamlessly with **Hot Design**, allowing you to see UI changes instantly without rebuilding your app. This boosts productivity, reduces iteration time, and provides real-time feedback for both visual and functional tweaks in your UI. Hot Reload also includes a visual indicator to help you monitor changes as you develop, further enhancing your workflow.

**Hot Design** is part of the **Uno Platform Studio**, a suite of tools designed to streamline your cross-platform app development and boost productivity.

[➜ Learn more about Uno Platform Studio](xref:Uno.Platform.Studio.Overview)
[➜ Learn more about Uno Platform Studio](xref:Uno.Studio.Overview)

### Key Features

Expand Down Expand Up @@ -54,8 +54,8 @@ By simplifying UI development and accelerating your workflow, **Hot Design** hel

## Next Steps

- **[Get Started Guide](xref:Uno.HotDesign.GetStarted.Guide)**
- **[Get Started Guide](xref:Uno.Studio.HotDesign.GetStarted.Guide)**
Getting started with setting up **Hot Design** and exploring the key areas and features of the visual designer it offers.

- **[Counter App Tutorial](xref:Uno.HotDesign.GetStarted.CounterTutorial)**
- **[Counter App Tutorial](xref:Uno.Studio.HotDesign.GetStarted.CounterTutorial)**
A hands-on walkthrough for building the [Counter App](xref:Uno.Workshop.Counter) using **Hot Design**, showcasing its features and workflow in action.
31 changes: 31 additions & 0 deletions doc/articles/studio/Hot Reload/get-started-with-hot-reload.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
uid: Uno.Studio.HotReload.GetStarted
---

# Getting Started with Hot Reload

## [**Visual Studio 2022**](#tab/vswin)

- Setup your environment by following our [getting started guides](xref:Uno.GetStarted.vs2022).
- Start your application (with or without the debugger, depending on the supported features below).
- Make changes to your XAML or C# code, save your file then press the red flame button in the toolbar or use `Alt+F10`.

![Hot Reload button](../Assets/features/hotreload/hot-reload-button.png)

## [**Visual Studio Code**](#tab/vscode)

- Setup your environment by following our [getting started guide](xref:Uno.GetStarted.vscode).
- Start the application without the debugger.
- Wait a few seconds for the hot reload engine to become available (see our troubleshooting tips below).
- Make changes to your XAML or C# code, then save your file.

## [**Rider**](#tab/rider)

- Setup your environment by following our [getting started guide](xref:Uno.GetStarted.Rider).
- Start the application without the debugger.
- Wait a few seconds for the hot reload engine to become available (see our troubleshooting tips below).
- Make changes to your XAML or C# code, then save your file.

---

[!INCLUDES [learn-more-about-hot-reload](includes/learn-more-about-hot-reload-inline.md)]
77 changes: 77 additions & 0 deletions doc/articles/studio/Hot Reload/hot-reload-controls.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
---
uid: Uno.Studio.HotReload.Controls
---

# Controls in the Hot Reload UI

This article will give you a Overview about the Controls and Icons you will see and work with, when using Hot Reload in your specific IDE.

## Hot Reload Indicator

> [!NOTE]
> The **Hot Reload indicator** is currently not supported for the **WinAppSDK** target.

Hot Reload displays a visual indicator to help you further monitor changes while developing. It displays new information every time Hot Reload is triggered. The indicator is enabled by default within the `UseStudio()` method which is located in the root `App.xaml.cs` file. This displays an overlay that hosts the visual indicator. If you wish to disable it, you simply have to provide the following boolean: `UseStudio(showHotReloadIndicator: false)`, removing the overlay from the view.

To start using the **Hot Reload indicator** using the **latest stable 5.5 Uno.Sdk version or higher**, ensure you are signed in with your Uno Platform account. Follow [these instructions](xref:Uno.GetStarted.Licensing) to register and sign in.

<p align="center">
<img src="~/articles/Assets/features/hotreload/indicator-not-connected-with-flyout.png" alt="The Hot Reload indicator is not connected. A flyout message states that Hot Reload is available only to registered users and prompts the user to sign in via the Uno Platform Settings button." />
</p>

For existing applications, take this opportunity to update to the [latest **Uno.Sdk** version](https://www.nuget.org/packages/Uno.Sdk/latest) to take advantage of all the latest improvements and support. Refer to our [migration guide](xref:Uno.Development.MigratingFromPreviousReleases) for upgrade steps.

> [!IMPORTANT]
> When upgrading to **Uno.Sdk 5.5 or higher**, the `EnableHotReload()` method in `App.xaml.cs` is deprecated and should be replaced with `UseStudio()`.

<p align="center">
<img src="~/articles/Assets/features/hotreload/indicator.png" alt="A hot reload visual indicator" />
</p>

> [!TIP]
> The overlay can be moved by using the anchor on the left-hand side.

The indicator displays the current connection status. Clicking on it will open a flyout containing all events or changes that were applied by Hot Reload. These events display more details about Hot Reload changes, such as its status and impacted files.

<p align="center">
<img src="~/articles/Assets/features/hotreload/indicator-flyout.png" alt="A window showing events from Hot Reload" />
</p>

## Statuses

Here's a summary of the Hot Reload connection statuses and their corresponding icons:

### Connection

- ![The icon indicating that the user is not signed in](Assets/status-connection-not-signed-in.png) **Not Signed In**
_User needs to sign in to enable Hot Reload._

- ![The icon indicating an ongoing connection attempt](Assets/status-connection-connecting.png) **Connecting**
_Establishing a connection._

- ![The icon indicating a successful connection](Assets/status-connection-connected.png) **Connected**
_Connection established._

- ![The icon indicating a connection issue](Assets/status-connection-warning.png) **Warning**
_Usually indicates an issue that can be resolved by restarting your IDE._

- ![The icon indicating a failed connection](Assets/status-connection-failed.png) **Connection Failed**
_A connection error occurred. Refer to the [troubleshooting documentation](#troubleshooting) for possible solutions._

- ![The icon indicating the server is unreachable](Assets/status-connection-server-unreachable.png) **Server Unreachable**
_Hot Reload could not connect to the server. Check the [troubleshooting documentation](#troubleshooting) for guidance._

#### Operation

- ![The icon shown when Hot Reload succeeds](Assets/status-hr-success.png) **Success**
_The Hot Reload changes have been applied successfully._

- ![The icon shown when Hot Reload fails](Assets/status-hr-failed.png) **Failed**
_Hot Reload encountered an error and could not apply the changes._

- ![The icon shown when Hot Reload is in progress](Assets/status-hr-processing.png) **Processing**
_Hot Reload is applying changes or initializing._

---

[!INCLUDES [learn-more-about-hot-reload](includes/learn-more-about-hot-reload-inline.md)]
Loading