Skynet with React

Search…

Skynet with React

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 and Drag-and-Drop Uploader
We fully support BrowserRouter and other routing techniques using Framework-Flexible Routing, but for getting started, sometimes it's nice to just drag-and-drop your build folder.
If you're using React Router for your page routing, you may want to use its HashRouter instead of BrowserRouter . This helps if you want your site to also deploy on IPFS or Arweave, which don't support Framework-Flexible Routing.
In many code examples, this replacement happens in the import statement.
import {
  // BrowserRouter as Router,
  HashRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
This will modify links to contain # before the route.
Build & Deploy
Run your normal build command, then upload the build folder containing an index.html file to Skynet. When using the Siasky.net 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 automatically building and deploying your site using our copy-and-paste Github Action.
Or, consider hosting your website using a Handshake Name, ENS .eth name, or a traditional domain name using DNSLink.

Developer Guides - Previous

Server-Hosted Skynet Usage

Next - Developer Guides

Deploy-to-Skynet Github Action

Last modified 4mo ago

Copy link

Outline

Use HashRouter when using React-Router and Drag-and-Drop Uploader

Build & Deploy

Going Further