Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/creazy231/nuxt-ipfs

Static Website hosting using Nuxt + IPFS
https://github.com/creazy231/nuxt-ipfs

ipfs nuxt

Last synced: about 11 hours ago
JSON representation

Static Website hosting using Nuxt + IPFS

Awesome Lists containing this project

README 

        
# Nuxt + IPFS

As a developer at [Qwellcode](https://twitter.com/qwellcode), I'm excited to delve into the technical implementation of the [MOCA Fundraiser](https://hackmd.io/@reneil1337/fundraiser) that I've been dedicatedly working on in recent weeks.



This article primarily centers around detailing the frontend execution and the seamless integration between **[Nuxt](https://nuxt.com/) + [IPFS](https://ipfs.tech/)**.



![](https://hackmd.io/_uploads/ByDkwvdnn.jpg)



## Static Hosting (SSG)

Like many other frameworks, Nuxt also provides the ability to statically host your project. This is a fundamental requirement for projects that are intended to be hosted on IPFS afterward.



You can find more comprehensive details about Static Hosting with Nuxt [here](https://nuxt.com/docs/getting-started/deployment#static-hosting).



## The Issue with `/ipfs/`

As a small example, this is what a link to a file or webpage on IPFS looks like: `https://ipfs.io/ipfs/Qma1chuT4CzVAQo9dcLNAR5NyAvrFYDWcayiv2NEKRMyEg`.



As evident from this example, a statically hosted webpage would be located in the subdirectory `/ipfs/Qma1chuT4CzVAQo9dcLNAR5NyAvrFYDWcayiv2NEKRMyEg`. However, Nuxt employs absolute paths that, in this case, would assume the webpage is accessible via the URL `https://ipfs.io/`, which is not the case, as shown in the above example.



Now, one might naturally assume that setting the Base URL using the `` tag would suffice. However, for various reasons, that's not the case.



## Finding a Solution

I've experimented with various methods to make a Nuxt project work seamlessly when hosted on IPFS. I'll walk you through what I've tried, but regrettably, none of these attempts have yielded a comprehensive solution that works flawlessly.



### Setting the `baseURL`

As I mentioned before, my initial idea was to set the `baseURL` of the website in order to inform Nuxt that the webpage is not hosted at `https://ipfs.io/`, but rather in an imaginary subdirectory. While this approach might work for regular websites, it encounters a significant problem when hosted on IPFS: you don't know the IPFS hash prior to uploading. Therefore, you cannot predefine it. Consequently, I quickly abandoned this idea as well.



### Nitro App Hooks

After struggling to get the website up and running through a simple configuration, I decided to delve into the [Nitro App Hooks](https://nuxt.com/docs/guide/going-further/hooks#nitro-app-hooks-runtime). These hooks allow manipulation of webpage output, and the two key ones are `render:html` and `render:response`. Leveraging these hooks, I modified the rendered HTML page so that all paths became relative to the current URL, rather than being "relative" to the website's base URL.



I also attempted to dynamically set the base URL using these hooks afterward, but unfortunately, this approach also did not yield the desired outcome.



### Returning to Configuration

After all the unsuccessful experiments listed above, I made the decision to revisit the configuration of Nuxt and Nitro. I systematically explored all potential configurations of Nuxt and Nitro to determine which of them could be beneficial for achieving my objectives.



And behold - it works! Finally!



## Solution 🚀

The solution comprises a combination of various configurations. Particularly highlighted are the two aspects: `runtimeConfig.app.baseURL` and `router.options.hashMode`. It turns out it can be that simple after all 🥲



With the following configuration in the `nuxt.config.ts` file, the project functions seamlessly both in the local development environment and when hosted on IPFS:



```javascript

export default {

  runtimeConfig: {

    app: {

      baseURL: process.env.NODE_ENV === "development" ? "/" : "./",

    },

  },



  router: {

    options: {

      hashMode: process.env.NODE_ENV !== "development",

    },

  },

    

  // ...other configurations

}

```



Now, you can generate a static page using the following command...

```bash

npx nuxi generate

```



... and then upload the `.output/public` directory to IPFS using services like Pinata, for instance.



## Do Plugins and Modules Work?

In short - Yes! Based on the example of the [MOCA Fundraiser](https://ipfs.qwellcode.de/ipfs/Qma1chuT4CzVAQo9dcLNAR5NyAvrFYDWcayiv2NEKRMyEg) project, I've tested the following modules and can confirm that they work seamlessly:



```

@nuxtjs/tailwindcss

@nuxt/image

@vueuse/nuxt

nuxt-seo-kit (with some restrictions due to SSR/SSG)

```



Naturally, many other modules and plugins will also work. This list simply highlights the ones I've utilized in this case.



View the MOCA Fundraiser Collection hosted on IPFS using Nuxt: https://ipfs.qwellcode.de/ipfs/Qma1chuT4CzVAQo9dcLNAR5NyAvrFYDWcayiv2NEKRMyEg



## Sample Repository

GitHub: https://github.com/creazy231/nuxt-ipfs



Website: https://ipfs.io/ipfs/QmNrRzfd3STcLEvVxBTYCikFSKZH8H3C1EB5xj25Fn3sut