How to deploy Angular app to IPFS/IPNS

In this short tutorial you will learn how to share an application written in Angular on IPFS and how to get an IPNS address that can be shared with others on the network through a normal web browser.

Install IPFS

You must have IPFS application installed. I recommend reading the documentation on the IPFS website (Command-line quick start).

Install Angular CLI

Install Angular CLI globally on your system.

npm install -g @angular/cli

Create Angular Application

Create an angular project. For the purposes of this tutorial, the application will be called your-app.

ng new your-app

Build Angular Application

Then go to the project catalog in the console and build a production version of the project.

cd your-app
ng build --prod

Deploy to IPFS

Once the operation is complete, go to the newly created dist/your-app directory and then add the entire directory to IPFS.

cd dist/your-app
ipfs add -rH .

The following options are used in the command:

  -r, --recursive            bool   - Add directory paths recursively.
  -H, --hidden               bool   - Include files that are hidden. Only takes
                                      effect on recursive add.

In the console we should receive a full list of added files and their CID (addresses) in the IPFS.

added Qmf7oUh4cQtVmfsW4yPq8sWBKigxfZ5qaiQUJwppP7wkzS your-app/3rdpartylicenses.txt
added QmQDLVoPGDjKBYdtccruufTVXm8b4s2SEbzjNwT6w73EBv your-app/favicon.ico
added QmbqCDDxFhV1majkiSQCDXX4E15oVwWYdxhbpPRdUBt6GK your-app/index.html
added QmPCzBgu6tPY1M5UBe8gq7i1HMYnStxb9PDG2iKseAAUzv your-app/main.8430dc281939a46646a3.js
added QmYjqbzdkbdfZERLGQJPE6MhRJfxoZspdCWwk8VtpFsGQH your-app/polyfills.a4021de53358bb0fec14.js
added Qmb3UHBRdMTRGA4AXa6XMbBxzkZFAihsEnd6qDvFtJ1qvN your-app/runtime.e227d1a0e31cbccbf8ec.js
added QmbFMke1KXqnYyBBWxB74N4c5SBnJMVAiMNRcGu6x1AwQH your-app/styles.3ff695c00d717f2d2a11.css
added QmcLXh9RWkN9imAYNFEACGRRWaDDPaJag9FA4NsyLz88VR your-app
 268.51 KiB / 268.51 KiB [=============================================] 100.00%

From now on, the application will be available at the CID QmcLXh9RWkN9imAYNFEACGRWaDDPaJag9FA4NsyLz88VR. Which we can see using the link:

http://ipfs.io/ipfs/QmcLXh9RWkN9imAYNFEACGRRWaDDPaJag9FA4NsyLz88VR

or by converting the CID address to base32 with the following command:

ipfs cid base32 QmcLXh9RWkN9imAYNFEACGRRWaDDPaJag9FA4NsyLz88VR

Which will return the value to us in this case: bafybeigp7oxo3wlhffwmbrijh4ebfontr6e72qry5n22ygtyanpau6m66q Using gateway dweb.link we can see our website using the link below.

http://bafybeigp7oxo3wlhffwmbrijh4ebfontr6e72qry5n22ygtyanpau6m66q.ipfs.dweb.link/

It is useful if we want our website to be able to install service worker.

Publish to IPNS

Every time we do a ng build --prod the CID address of the project changes for the whole directory because the hash of js files changes or by editing the project. In order to avoid continuous linking with a different CID for subsequent versions of the application we can use IPNS name. A name in IPNS is the hash of a public key. It is associated with a record containing information about the hash it links to that is signed by the corresponding private key. New records can be signed and published at any time. If you want to learn more about what IPNS is, read InterPlanetary Name System (IPNS) documentation.

ipfs name publish QmcLXh9RWkN9imAYNFEACGRRWaDDPaJag9FA4NsyLz88VR

Output:

Published to k2k4r8ox4iruav3sij20d6ibh32ka07rxwcvgf78phjmbnhkvaovdirf: /ipfs/QmcLXh9RWkN9imAYNFEACGRRWaDDPaJag9FA4NsyLz88VR

From now on, a reference to the CID folder QmcLXh9RWkN9imAYNFEACGRWaDDPaJag9FA4NsyLz88VR will be located at k2k4r8ox4iruav3sij20d6ibh32ka07rxwcvgf78phjmbnhkvaovdirf. Every time you want to update your destination address you have to execute the command above.

Example of IPNS gateway address. https://k2k4r8ox4iruav3sij20d6ibh32ka07rxwcvgf78phjmbnhkvaovdirf.ipns.dweb.link/

To make it easier, you can use the special option Q:

  -Q, --quieter              bool   - Write only final hash.

It allows us to create a simple script in bash that will automatically set the newly added IPFS folder to IPNS.

CID=$(ipfs add -rQH .)
ipfs name publish $CID

As in the case of this blog. This script can also be used for continuous delivery of our project.