Build and Deployment Notes

Follow these notes on how to configure and build your application. Then you can select or drag & drop the built app folder.

Note: Use hash router in React, Vue, and Nuxt-based apps for proper routing support in Arweave. For Next apps, there is no hash-based routing, so the manifest is adjusted for routes to work on reload, but dynamic routes may not work on reload.

Simple HTML/CSS/JS App

You don't have to do anything. Just select or drag & drop the folder!

ReactJS & NextJS

ReactJS

Recommended: Use HashRouter from react-router-dom in React apps.

Add this line to the scripts in package.json and build your React project using this script.

"dragbuild": "PUBLIC_URL=./ react-scripts build"

NextJS Static Export

Learn about it here for the supported and unsupported features in static HTML export.

If you are having problems regarding images in Next.js HTML export, see here.

Add the configuration to the next.config.js file.

assetPrefix: "./"

Add this line to the scripts in package.json and build your Next project using this script.

"dragbuild" : "next build && next export"

VueJS & NuxtJS

VueJS

Modify vue.config.js to include the following config and build your Vue project as you normally would:

publicPath: "./"

NuxtJS

Modify nuxt.config.js to include the following config and build your Nuxt project as you normally would:

target: 'static',
router: {
    mode: 'hash',
    base: './',
}

Read more about going full static mode in Nuxt.js: Going Full Static.

ViteJS

Recommended: Use hash router for React, Vue, and Svelte accordingly.

Add this line to the scripts in package.json and build your Vite project using this script.

"dragbuild" : "vite build --base ./"