Skynet with React

MySky or mention React Context as a way to use only one SkynetClient?

In most instances, React and React-based frameworks work seamlessly with Skynet. Here are some tips to keep in mind when using Create React App.

We use Create React App in the Introduction Workshop, so you can refer to that codebase as well.

Use HashRouter when using React-Router

If you're using React Router for your page routing, you'll want to use its HashRouter instead of BrowserRouter . In many code examples, this replacement happens in the import statement.

import {
// BrowserRouter as Router,
HashRouter as Router,
} from "react-router-dom";

This will modify links to contain # before the route.

We are plan to release full support for BrowserRouter and other routing techniques in September 2021.

Add "Homepage" to package.json

In order for create-react-app to know how to load your js files, you need to add the following to your application's root package.json

// ...
"homepage": ".",
// ...

Build & Deploy

Run your normal build command, then upload the build folder containing an index.html file to Skynet. When using the homepage, be sure to select the folder tab.

Select the "Do you want to upload a web app or directory?" Tab before Uploading

Going Further

Next, consider hosting your website using a Handshake Name or a traditional domain name using DNSLink.

Or, consider improving your build pipeline using our Github Action.