Fusion.js, Uber’s open source universal web framework, is designed to make web development easier and produce lightweight, high-performing apps. We initially built Fusion.js to revamp our own websites, and have since offered it to the community as an open source project.
In this tutorial, we walkthrough how to get started with Fusion.js and have a 'Hello World!' application up and running in 5 minutes. The tutorial walks through three easy steps, from creating the application to displaying 'Hello World!' in the browser. The 'Hello World!' application is a good starting point for those seeking to get deeper into the Fusion.js framework.
Creating a Fusion.js application is easy. In this tutorial, we will use Yarn, an open source package manager created at Facebook, to set up the Fusion.js scaffold for our application. Yarn replaces the existing workflow with the npm client or another package manager while remaining compatible with the npm registry. It has the same feature set as existing workflows while operating faster, more securely, and more reliably.
Note: If you have already completed this step, please skip to Step 2: Run your app.
In your terminal, run the following
yarn command to create a boilerplate app,
yarn create fusion-app hello-world-app
The command will create a new directory,
hello-world-app, that contains all the files needed to set up and run Fusion.js. When Yarn finishes successfully, the terminal will display the message "Success! You have created a Fusion.js project". Now go to the newly-created source directory of
ls to view the file structure of
. ├── pages │ ├── home.js │ └── pageNotFound.js ├── main.js └── root.js
The directory pages contains the React code for rendering the demo page and the "Page not found" page. The file
main.js is the application's entrypoint, and
root.js contains routes.
You are now ready to start the application you created in Step 1. In your terminal, run the following
yarn command in the project’s root directory:
This serves up the Fusion.js demo page, as shown below, on http://localhost:3000.
In the final step of this tutorial, you will rewrite the default Fusion.js demo page to make it say 'Hello World!'. To simplify this step, you must replace the demo code in the existing
home.js file with new code that can render the 'Hello World!' text in your browser. This means the routes will remain the same and no other code changes are required.
home.jsand remove the existing code so the file is completely empty.
home.js. This snippet imports the React libraries used to render the 'Hello World!' text in your browser.
// src/pages/home.js import React from ‘react’; const Home = () => ( ); export default Home;
// src/pages/home.js import React from ‘react’; const Home = () => ( <div>Hello World!</div> ); export default Home;
Great job! You've just learned how to create a simple application with Fusion.js!
We have a list of Fusion.js example applications on the Create a project page.
When you're ready to start on a new web project, run through these steps:
Here are some more in-depth sections covering various aspects of Fusion.js:
Check out the links below to help you get familiar with other useful plugins that are provided by the Fusion.js team: