GithubLinkedInMedium
GithubLinkedInMedium
⚛️

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

Created
Oct 22, 2021 8:57 PM
Tags
computingcloudstatereact

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
image

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

Demo
Demo
🎉

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 (
    <div>
      <p>
        Your name:{" "}
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </p>
      <p>Hello {name}!</p>
    </div>
  );
}

Demo

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.