Skynet Workshops
Skynet Topics
Integrations
Developer Guides
WEBPORTAL MANAGEMENT
Framework-Flexible Routing
Setup Skynet Deployments to accept various page serving and routing configurations to meet the needs of a variety of web frameworks.
Different web frameworks expect different file serving behaviors, especially for routes pointing to dynamic content. Skynet supports advanced configuration for setting the server behavior of an upload. It does this by allowing uploads to attach metadata fields inspired by NGINX –
tryFiles and errorPages .If this seems odd to you, consider that a site (or skyfile) doen't have a file available for every
/user/[USERID] combination. If a user requests that URL though, we want the browser to return a file that can handle the logic for the web application, even though that file doesn't exist in the directory uploaded to Skynet.Framework Support
The following frameworks have compatibility on Skynet.
Have you tested a framework not included here or think we made a mistake? Reach out on Discord or raise an issue on this document's Github repo.
Although you are able to define various
errorpages, a Skynet Webportal will only ever encounter a 404 error on your deployment. Any other errors would result in not accessing your deployment, and thus not being able to serve your error page.Setting Routing Configuration for Uploads in skynet-nodejs
Right now, we only have upload support in
@skynetlabs/skynet-nodejs 2.2.0The below code sample shows some default values and using them with your Skynet client.
1
const skynetNode = require('@skynetlabs/skynet-nodejs');
2
3
// Feature is only available on dev server for now.
4
const server = 'https://siasky.dev';
5
6
// Initialize client
7
let nodeClient = new skynetNode.SkynetClient(server);
8
9
// Sensible defaults for some project types
10
const routingPresets = {
11
gatsby: {
12
errorPages: { 404: '/404.html' },
13
tryFiles: ['index.html', '/index.html'],
14
},
15
gatsbyStatic: {
16
errorPages: { 404: '/404.html' },
17
tryFiles: ['index.html'],
18
},
19
reactRouter: {
20
tryFiles: ['index.html', '/index.html'],
21
},
22
traditional: {
23
errorPages: { 404: '/404.html' },
24
tryFiles: ['index.html'],
25
},
26
};
27
28
// Select presets
29
const {tryFiles, errorPages} = routingPresets.reactRouter;
30
31
// Pass routing configuration into uploadDirectoy's
32
// custom objects.
33
const response = await nodeClient.uploadDirectory(path, {
34
tryFiles,
35
errorPages,
36
});
Copied!
Wanting to directly call the API? See documentation here. Remember to use
siasky.net/skynet/skyfile and to URL-encode the JSON of the parameters.Testing Repo
We have a repo available for running tests for uploading your project. Please refer to the Readme to learn more.
GitHub - SkynetLabs/custom-routing-tests
GitHub
Choosing Values
When uploading a folder there are two metadata values you're able to set.
- 1.
tryfiles– If the file you requested does not exist, the web portal will iterate through the list, trying to return the specified file for the route requested. All directory uploads will now default to["index.html"]so for a request to/foo/the webportal will serve/foo/index.html. Absolute path file names will be returned if no other files are found, so using["index.html", "/index.html"]will return your root-levelindex.htmlfile if no other routes match the request. (If you have an absolute path defined, this file must exist in your directory, and will be returned with a status 200 when a 404 would otherwise be returned.) - 2.
errorpages– The maps a specific HTTP error status code with the absolute-path file to return if the error state is reached. This is not set by default, but for "traditional" style website, we suggest{ 404: '/404.html' }.
The API endpoint capitalization differs from the SDK libraries, in order to meet language standards.
skynet-nodejs and skynet-js use camelcase (tryFiles) while the API endpoint uses lowercase (tryfiles).Framework Specific Notes
Gatsby
We have 2 presets declared for Gatsby above. Some sites are built to be fully static, so every available route is generated at build time. For these projects, you can use
gatsbyStatic settings and still enable a 404 page.If your Gatsby site has some routes that are not generated at build time (
/users/xyz_dynamic/), use the gatsby configuration and define a 404 behavior in the routes of your application. A 200 status response will be returned for these files.NextJS
NextJS supports building static sites using
next-export, (see their docs) but does not support this build method for projects using next-image or any other unsupported feature.Last modified 1mo ago