macOS Installation

This is a step-by-footstep tutorial that takes yous through setting upward Fuse X and creating your first project. Should you happen to meet problems during installation, please let u.s.a. know!

Mono and Node.js are required to install this software.

A working internet connection is required to install this software.

Requirements

  • OS Ten ten.x Yosemite or newer
  • macOS 11.two Big Sur (or latest) is recommended
  • Intel processor (M1 back up is planned)
  • Mono 6.x or newer
  • Node.js 12 or newer

Running the installer

The latest version of Fuse 10 can e'er exist downloaded from the download folio. Download the macOS installer (.dmg).

You should accept downloaded a file called fuse-x-ii.0.0-mac.dmg or similar. Open it and follow the installation procedure.

This chapter volition guide you through it.

You can skip this chapter if you lot already know how to exercise this.

Prerequisites

Make sure yous take upwardly-to-appointment Mono and Node.js installations on your system.

This tin can be verified by running the post-obit commands.

          $ mono --version  Mono JIT compiler version half dozen.10.0.0 (or newer) ...        
          $ node --version  v12.0.0 (or newer)

Opening the installer

dmg

This is how the DMG looks when it is opened.

Run Install fuse X.pkg to keep.

Installation process

setup1

Howdy, and welcome to our cool installer!

Click Go on to continue.

setup2

Please read the License Agreement advisedly.

Click Keep to go along.

setup2b

Confirm that you have read the License Agreement.

Click Agree to go along.

setup3

Optional: Sometimes this screen is shown. Install for all users of this computer should be selected.

Click Continue to continue.

setup4

The installation will really take a bit more space due to dependencies beingness downloading while installing.

Click Install to go on.

setup5

The installer needs to run equally Administrator in lodge to complete.

Enter your password and click Install Software to keep.

setup6

Time for a quick coffee ☕

Please look a few minutes...

setup7

Done and washed. Good chore!

Click Shut to exit.

Starting Fuse X

Fuse X can be started in four different ways.

i. From Installer: fuse 10 was started when finishing the installer.

2. From Finder: Go to Applications and beginning the fuse X app.

three. From Spotlight: Search for fuse X and hit Enter.

iv. From Terminal: Type fuse and hitting Enter.

Finding a text editor

Fuse X requires an external text editor in order to brand changes to the UX markup in our app. To streamline your experience with Fuse X, nosotros provide plugins for some of the more popular text editors which provide code completion, error lists, output logs and the ability to launch Fuse apps from inside the text editor.

We currently provide plugins for the post-obit text editors:

Editor Installation Plugin homepage
Visual Studio Code link link
Atom link link
Sublime Text three link link

Starting a new project

When opening Fuse X, the first thing you'll see is the dashboard:

image of dashboard

To start a new project, we commencement have to choice a template. Fuse 10 comes with a few templates which provide a good starting point when starting from scratch. For the purpose of this guide, we want to choose the "New fuse X project" template. This template gives a project with one file in which we tin can easily start edifice our app. Choose this template by clicking the box with its name, and then click the "create" push. You will then have to pick a name and a directory for your projection.

create project

After clicking the "create" push button, Fuse Ten starts a local preview viewport. You'll discover that this process accept some time, as Fuse X has to download the packages containing the framework code used to create apps with Fuse Ten. This only happens the first time Fuse Ten is run after installation. Yous can see the download progress in the "Log" panel at the bottom of the window.

preview

After Fuse 10 is done downloading all the required packages, the preview viewport is started, and y'all'll notice that all we take to start with is a white background.

Making some changes

To open the project in your text editor, either click the "Projection" tab and select MainView.ux or open the project folder directly from your text editor.

To get started, paste the following lawmaking directly into MainView.ux, replacing the existing code:

          <App Background="#2196F3">   <ClientPanel>       <StackPanel ItemSpacing="10">           <Text FontSize="xxx">How-do-you-do, world!</Text>           <Slider />           <Push Text="Push button" />           <Switch Alignment="Left" />       </StackPanel>   </ClientPanel> </App>

As before long every bit you salve the certificate, y'all should find the preview viewport update to display some Text, a Slider, a Button and a Switch control, stacked on tiptop of each other vertically. Fuse X picks up any change you make to your documents, and updates automatically and immediately to reverberate those changes. This even works on your devices which you lot tin read about in the next department.

Running preview on device

Fuse X tin exercise live preview on both Android and iOS devices, even at the aforementioned time!

The simplest way to get started is with the Fuse Ten Preview app so you should definitely try that i out first.

If you lot ever need to include non-standard packages or Uno lawmaking in your projection and then you can instead build your own custom preview, but you can make that switch whenever you want to and then there's no impairment in starting out with the Fuse X Preview app.

Uninstall

If for any reason we need to remove all of the Fuse X components, we tin can apply this uninstall script.

Xcode

In gild to exercise iOS app exports and custom previews you volition need the latest version of Xcode. Follow these instructions, or search for it in the Mac App Store.

What next?

Now that you're all ready up, information technology'due south fourth dimension to become started learning the fundamentals of Fuse. A skillful next pace is to have a expect at the Introduction to Fuse module, which will take y'all through the fundamentals of Fuse. If you lot prefer learning by instance, the hikr tutorial will pb you through the creation of a unproblematic hiking app, while explaining each step along the way. If yous simply want to kickoff digging into example code and play around on your own, at that place is a ton of content to look at on our examples page likewise as in the fuse-samples github repo.