How to Deploy an Unstoppable Angular App to IPFS

Want a truly decentralized application? Basically every so called “dApp” you’ve heard of is not decentralized, even if they have “decentralized” in the name or have a suffix that says “dex”. They are just apps that put some bits of data on the blockchain, but the rest is centralized. Not to say that’s bad, it’s just not decentralized. To be fully decentralized your data AND your app/user interface need to be on a system that can’t be shut down by a single entity. IPFS is a great way to do this for your apps.

This article will show you step by step how to deploy your application to IPFS to make it actually decentralized and essentially unstoppable.

First Things First

I’ll assume you have Angular installed.

And you’ll have to have IPFS installed too, which I’ll assume you don’t have so I’ll wait five minutes before continuing…

Ok, got it? In one terminal, start it up:

ipfs daemon

Now we’ll do the rest in another terminal.

Create and Deploy an Angular App

We’ll just use the default Angular app that is generated with the ng cli:

ng new Test
cd Test

Now open src/index.html and change the <base href> tag to:

<script>
     document.write('<base href="'+window.location.pathname+'"/>');
</script>

This will allow it to use the IPFS gateway path that we won’t know until after it’s deployed. Now let’s build it and deploy it to IPFS:

ng build --prod --aot
ipfs add -r dist/Test

That will add your files to IPFS and will print something like this:

That second last line (line 10) has the root directory hash. Copy that.

Boom, you’re done!

Now you can view your app live on any IPFS gateway by using the hash you got above. IPFS gateways are http gateways that companies run to let people access IPFS files easily. Here are a couple of main ones you can use, one operated by the IPFS organization and one by Cloudflare:

https://ipfs.io/ipfs/QmSnX1nY8wiJSRAcS1fxcUJNW81b5tqzRRrm9yHFJeKzXb/
or
https://cloudflare-ipfs.com/ipfs/QmSnX1nY8wiJSRAcS1fxcUJNW81b5tqzRRrm9yHFJeKzXb/

If you load up either one of those with your hash, you’ll see the Angular welcome screen: