Decentralised web apps: How to Deploy your web app onto IPFS with Fleek
Tags: javascript, vue, blockchain, devops
Published: 2020-03-22 19:52:23

So I have been doing Frontend Development for a few years now and while I have tried different deployment solutions in the past, never did I come across a one-click solution for deploying to the [InterPlanetary File System (IPFS)](https://ipfs.io/).
###Introducing [Fleek](https://fleek.co/)
*From local development to global deployment, Fleek is everything you need to build fast modern websites hosted on IPFS. Welcome to the new internet.*
###Vue + Fleek = Decentralised Magic?
Fleek provides an easy to set up solution for continous deployment using git. Once set up, it tracks for new changes to your repository and triggers deployments accordingly.
While almost all sites & popular frameworks are supported by Fleek, for the purpose of this tutorial I will be using Vue CLI 4 to set up a [Vue.js](https://vuejs.org/) app.
###Gathering our tools
*If you already know how to set up a Vue CLI project, you can directly jump to this section*

Make sure that you have Node.js version 8.9 or above installed (8.11.0+ recommended). If not, you can do so by heading over [here](https://nodejs.org/).
*[npm](https://www.npmjs.com/) comes preinstalled with [node.js](https://nodejs.org/)*

For installing Vue CLI 4, run the commands below:
```
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```
Note: *You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g. n or nvm).*

You can check you have the right version with this command:
```
vue --version
```
###Setting up the project
Let's call our app "decentralised-vue" and set up a new project by that name.
```
vue create decentralised-vue
```
Now select the options/preset of your choice, for this tutorial I am selecting these options: 

![features-needed-for-the-project](https://i.ibb.co/3WsC9BN/image.png)
After the project is set up:
```
cd decentralised-vue
npm run serve
```
Now let's go to [localhost:8080](http://localhost:8080/).

![decentralised-vue-project-home](https://i.ibb.co/WcdsTKk/image.png)
###Deploying Through Fleek

We now need to create a [GitHub](https://github.com/) repository to store our project so Fleek can pick it up. You can create a repository and link it to our project using:
```
git remote add <name> <url>

git push <name>
```
The repository for this project can be found [here] (https://github.com/atharva3010/decentralised-vue). Now, we must go to [Fleek.co](https://fleek.co/), login and add a new site by clicking on the "Add new site" button.

![add-site-to-fleek](https://i.ibb.co/CHCtySx/image.png)

Connect with GitHub:

![connect-with-github](https://i.ibb.co/9nJhMLx/image.png)

Select the project repository:

![select-project-repository](https://i.ibb.co/Vtx0kVx/image.png)

Fleek will automatically determine the build commands:

![build-commands](https://i.ibb.co/V9ZYBPw/image.png)

Make sure that the build directory is `dist`:
*You can also specify any environment variables if your project requires them.*

![build-options](https://i.ibb.co/nRWZK4h/image.png)

Click "Deploy site" button, it will take a few mins.

![deploying-site](https://i.ibb.co/5M0q6sP/image.png)

Voila! Now your site is deployed.

![deployed-site](https://i.ibb.co/N6PvSsh/image.png)

You can see the project [deployed here](https://hidden-star-2877.on.fleek.co/). You can also set a custom domain by going to Settings > Domain Management, [you can also read about it here](https://docs.fleek.co/DomainHTTPS#customdomains). 
This is how easy it is to deploy apps onto IPFS using Fleek.

For further reading:

* [Fleek docs](https://docs.fleek.co/)
* [IPFS docs](https://docs.ipfs.io/)
* [Vue.js docs](https://vuejs.org/v2/guide/)