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.
You must have IPFS application installed. I recommend reading the documentation on the IPFS website (
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
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
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
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:
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
ipfs name publish QmcLXh9RWkN9imAYNFEACGRRWaDDPaJag9FA4NsyLz88VR
Published to k2k4r8ox4iruav3sij20d6ibh32ka07rxwcvgf78phjmbnhkvaovdirf: /ipfs/QmcLXh9RWkN9imAYNFEACGRRWaDDPaJag9FA4NsyLz88VR
From now on, a reference to the CID folder
Example of IPNS gateway address.
To make it easier, you can use the special option
-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.