Getting Started

Find all the code for this tutorial here: https://github.com/elastosjs/elastOS-react-tutorial

Install the trinity-cli tool:

sudo npm install -g @elastosfoundation/trinity-cli --unsafe-perm

trinity-cli --version

> Using DApp store endpoint https://dapp-store.elastos.org
> 1.1.31
We Assume Your Trinity-CLI is Installed Properly and on Version 1.1.31

From your workspace directory, this will create a new folder for you and is similar to create-react-app.

| => trinity-cli new
Using DApp store endpoint https://dapp-store.elastos.org
✔ Application title … [your app name]
... more fields

cd [your app name]
This will create an initial template React elastOS Capsule

Open the new application in your IDE, and also run npm install to initialize things.

There is a bug in the React template right now , temporarily you must import appManager: declare const appManager: AppManagerPlugin.AppManager

Then ensure we set visibility to show on App mount (within React.Component Parent App): useEffect(() => { appManager.setVisible("show") }, [])

Let’s do this now, open the new application in your IDE and open the file src/App.tsx

Replace the beginning code of App with:

declare const appManager: AppManagerPlugin.AppManager

const App: React.FC = () => {

  const [ ready, setReady ] = useState(false)

  useEffect(() => {
    document.addEventListener("deviceready", () => setReady(true), false)
  }, [])

  useEffect(() => {
    if (!ready) return
    appManager.setVisible("show")
  }, [ready])

  return (
    <IonApp>
      {/* ... rest of your app */}
    </IonApp>
  )
}

This will wait for "deviceready" and then use elastOS’s AppManagerPlugin setVisible method to show the capsule when it’s ready.

Make sure your Android emulator is running, elastOS is installed and developer mode is on before this next step. See: Running Your capsule if you need help.

Now call trinity-cli run in the following fashion:

trinity-cli run -p android

This will build your project and automatically install it, then you should see your app.

Now when you click your capsule it should open properly:

Now let’s add some boilerplate tools:

Setup Redux and Local Storage Persistence