π±Build a Web UI
In this tutorial, we walk through how to set up a React app incorporating CO2.storage. Unlike in the previous tutorial, where you set up your credentials in a .env file, in this case the user will authenticate with their own browser extension wallet.
1) In the folder where you want the project, run:
This will make a new demo-app
subfolder with React installed.
2) Navigate to that folder using cd demo-app
and check that React is working by starting the web app:
You should see your app when you go to http://localhost:3000/
3) In the app folder, install the latest co2-storage javascript package by running:
Now in demo-app/package.json
you should see co2-storage/js-api
listed under dependencies:
Where X.Y.Z is the version installed (at time of writing, 1.2.2).
4) We can now copy code from the examples repo folder in order to bring CO2.Storage functionality to our web app!
Open demo-app/src/App.js
and near the top add this import statement and these constants:
Here, we are:
Importing the package
Using the metamask browser plugin for authentication
Running an ipfs node locally in the web browser and using this to pin and retrieve files
Connecting to other ipfs nodes running co2-storage
Instantiating a FGStorage object
5) For example, if we want to add a button that searches templates we can add this to the HTML in App.js:
And add the SearchTemplates function below, copying from the search_templates.js
example:
When you go to your browser console, this should cause the results of the search to be returned.
Last updated