Create a Domo App: Easy 4 Step Guide Using React

By Will Evans / Founder & COO

December 22, 2021

Blog

Reading Time: 7 minutes

Creating or buying a Domo app is the easiest way to drive even more value out of your Domo investment, or could even be the way you start using Domo. There are already thousands of apps available on the Domo app store, but the possibilities are endless when it comes to what you can do for yourself as well as your customers when you are able to create your own Domo apps.

What is a Domo App?

Domo business intelligence/analytics is the first cloud-native solution that combines seamless integration and unusually high business user adoption. Organizations leverage the Domo platform in order to see their data in real-time and to make informed business decisions, also providing world-class visualizations and Domo dashboards for both desktop and mobile.

A custom Domo app enables users to move beyond the rich set of standard visualizations and dashboards to visually capture even the most specific and complex business processes while leveraging the full capabilities of Domo including governance and security.

There are so many amazing and creative Domo app examples, but below is one our favorites. The Utah Jazz created a custom Domo app of their arena that tracks attendance metrics, revenue, and sales, in the context of their building, for all their games. They could even filter by the time at which tickets we scanned, and drill into each specific seat to view all details. As shown below, this highly customized brand of real-time analytics gives insight and agility not possible prior to Domo, leading to increased ticket sales and related revenues.

product customer utah jazz custom app anon compressed
Source: Domo.com
How Do I Create a Domo App?
Step 1: Assess Prerequisites and Experience Required to Create a Domo App

The overall experience required to create a custom Domo app is centered around web development. Hands on experience with very common languages such as JavaScript as well as HTML and CSS cover most use cases. In this particular example, we show how to use the React library, so that is helpful as well, though not required.

It is also important to be comfortable using helper tools such as Git, NPM (Node Package Manager), Node.js as well as using the command line (for the Domo app CLI).

Lastly, assuming you have more than read-access to Domo (admin is not required) there is no separate Domo developer account you need in order to publish the app to your instance.

Step 2: Familiarize Yourself with Related Terms
  • App Manifest (manifest.json): this is the required config file that defines specific aspects of your Domo app
  • App.js: This is the file you will edit as the main screen users will see rendered to them
  • Data Source: this is your data that will be coming into Domo
  • Dataset: this is the data inside Domo that you extract from your data source(s)
  • Data Center: this is your page in Domo where you can view and manage your datasets, add new datasets, as well as combine datasets into dataflows
  • Domo App CLI: this is the main tool you will use to create, edit, and publish app designs
Step 3: Install the Necessary Libraries for Mac OSX (Link to Windows instructions included)

Directions to install using Windows can be found here: https://developer.domo.com/docs/dev-studio/set-up.

First, you will need to install the software package management system Homebrew. Ensure that you are using the bash shell in your Mac OS and then run this command in a terminal window and follow the prompts.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once you have the homebrew package manager installed, you will then run the following command in terminal to install the Domo app CLI:

brew install DomoApps/ryuu/domo

You can then confirm that Domo has been installed successfully by running the following command and if a version number is shown (e.g. 4.1.4), the CLI has been installed correctly:

domo --version

Next, you will want to login to Domo using the command:

domo login

From here it will prompt you to select an instance and you should see the following:

? Domo instance e.g. company.domo.com 
❯ new instance

You can use the up and down arrows on the keyboard if you have more than one instance or select “new instance” and hit enter, which will then prompt you to type in your Domo instance URL in place of the text “yourDomoUrl.domo.com”:

? Domo instance e.g. company.domo.com  new instance 
? Domo instance e.g. company.domo.com  yourDomoUrl.domo.com

After pressing enter, your browser should open and present you with a Domo login screen, and after you enter your credentials successfully you should then see something like this in your terminal window:

domo app cli
Step 4: Create the Starting Point Domo App with React

To begin creating a Domo app with React, you are going to need NPM (a CLI utility for interacting with your repository to aid in package installation, version management, and dependency management).

You can then use the command below to see which version NPM you have (like the Domo version command above). Keep in mind you need at least version 5.2 to create a React app:

npm -v

If you don’t already have it installed on your system, or if you have a version that is earlier than 5.2 you will need to go to the official Node.js library website and download it at this URL https://nodejs.org/en/ and then double-click and install the package (installing Node also includes NPM). Select the version of Node that states “Recommended for Most Users” to download.

You are now ready to create and install the stub or starting point Domo app with React, using the following command where “my-app” is the name of the app you would like to create:

npx create-react-app my-app --template @domoinc

The installation process may take a few minutes. After it is done you should see a folder appear in the directory where you created the app. Then, navigate to your CLI location to this directory by using the command, swapping out “my-app” with your app name:

cd my-app

This has now put you in the “my-app” directory. You can then run the following command to start your live app on “localhost”, which is the default name used to establish a connection using the default IP address 127.0.0.1:

npm start

This command will bring up the default browser on your local machine, to run the app locally as well. It will look like this:

domo app store

Your command line window should also look something like this, but it can take a couple or more minutes to finish the creation process. Oftentimes there is no available command prompt at this stage, so you can either open a new Terminal tab, or hit “Control-C” on your keyboard to get out of that state and force a command prompt:

Compiled successfully!
You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://XXX.XXX.XXX.XXX:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Next, we need to get the app ID. To do this we need to publish the app to Domo with the following command (be sure you are still logged into Domo, or log in again as shown above with the “domo login” command):

npm run upload

This will create a production build inside the Domo cloud, which takes anywhere between 20 seconds to a couple of minutes. In Domo, navigate to your Domo instance’s “Asset Library” and you should now see the new React Domo app:

Screen Shot 2021 10 28 at 12.21.41 PM 1

Before you make any changes, it’s a good idea to make a backup of your new app directory at this point. If you make any mistakes or changes while working with the files, you have a way to restore them. Just search for the app name on your local hard drive and then copy and paste a copy as a backup.

Now you will can open up your chosen code editor and navigate to the manifest.json file in the public directory as shown below. Directly underneath the “mapping” key add your dataset id with the key “id” (this lets the new React app know where to publish things in the Domo instance:

domo app files

There are a few more items that we are going to want to put into the manifest.json file to enable you to query data from Domo through the “mapping” key and to also have the ability to store data within AppDB, which is Domo’s app persistent storage, using the “collections” key.

Both the “mapping” and “collections” keys are an array of objects. Here is an example of how this can all look in your manifest.json:

manifest.json edits

Navigate back to your asset library in Domo and locate your new React Domo app. If you select the option to create a new card, you should see that same image now on the Domo cloud as you did before on your local machine:

default domo app screen

To create your first “Hello World” sample content, you can edit your local src/App.js file adding the text below and saving it:

<h2>Hello World</h2>

Now you can reload your local browser and see your new the “Hello World” text you added. You have now successfully created your own stub or starting point React app in Domo and you can start developing it further.

Conclusion

Developing custom apps in Domo enables users to drive significant additional value from the Domo platform. Assuming you or someone on your team has the basic development skills required, this is an easy way to create powerful custom experiences while working within the foundation of your existing Domo instance. As a Domo certified partner, Graphable has helped many clients implement and leverage these custom apps to realize additional value. Check out our Domo consulting page for more info or to get in touch, or if you are looking to understand the costs better, read more on our Domo pricing page.

Read Other Graphable AppDev Articles:


Graphable helps you make sense of your data by delivering expert data analytics consulting, data engineering, custom dev and applied data science services.

We are known for operating ethically, communicating well, and delivering on-time. With hundreds of successful projects across most industries, we have deep expertise in Financial Services, Life Sciences, Security/Intelligence, Transportation/Logistics, HighTech, and many others.

Thriving in the most challenging data integration and data science contexts, Graphable drives your analytics, data engineering, custom dev and applied data science success. Contact us to learn more about how we can help, or book a demo today.

Still learning? Check out a few of our introductory articles to learn more:

Additional discovery:

    We would also be happy to learn more about your current project and share how we might be able to help. Schedule a consultation with us today. We can also discuss pricing on these initial calls, including Neo4j pricing and Domo pricing. We look forward to speaking with you!


    Graphable helps you make sense of your data by delivering expert analytics, data engineering, custom dev and applied data science services.
     
    We are known for operating ethically, communicating well, and delivering on-time. With hundreds of successful projects across most industries, we have deep expertise in Financial Services, Life Sciences, Security/Intelligence, Transportation/Logistics, HighTech, and many others.
     
    Thriving in the most challenging data integration and data science contexts, Graphable drives your analytics, data engineering, custom dev and applied data science success. Contact us to learn more about how we can help, or book a demo today.

    We are known for operating ethically, communicating well, and delivering on-time. With hundreds of successful projects across most industries, we thrive in the most challenging data integration and data science contexts, driving analytics success.
    Contact us for more information: