How to create a React App with a backend in 2 minutes (or less)

Oct 22, 2021 8:57 PM

I've been developing Cloud State for a few months, and I'm excited to share the first tutorial that creates a fully functioning React Web App with Create React App.

Cloud State is a managed backend with first class support for React Apps. It gives developers managed auth and managed state that automatically syncs to the cloud. Users can sign up with a magic link, and it literally takes 3 lines of code to integrate your existing application. (Or instant setup using our CLI)

1. Install the Cloud State CLI

Cloud State has an open-source CLI which automates provisioning backends.

$ curl https://raw.githubusercontent.com/usecloudstate/cli/main/install.sh | sh

2. Create your backend: cloudstate create

$ cloudstate create

This should:

  • Prompt your for your e-mail address (if you don't already have an active session)
  • Verify it
  • Ask you a few questions about new app
  • Provision your app

3. Setup your code: cloudstate setup

$ cloudstate setup <path>

This should:

  • Ask you how you want to create the app in your <path>
  • Run a bunch of scripts to setup the app with cloud state preinstalled


And you're done! You can now save data with useCloudState()

How to save data with useCloudState()

It's like useState() hook, but it saves to the cloud.

The create-react-app script should have created a TestComponent that should show you how this is done.

import { client } from "./cloudstate";

export function TestComponent() {
  const [name, setName] = client.hooks.useCloudState("my.name", "World");
  const [counter, setCounter] = client.hooks.useCloudState("my.counter", 0);

  return (
        Your name:{" "}
        <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello {name}!</p>


State updates and Cloud State admin console side-by-side
State updates and Cloud State admin console side-by-side

Next Steps

Cloud State provisions managed backends for your React Applications. For developer documentation, see docs.