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 globally on your system.
npm install -g @angular/cli
Create an angular project. For the purposes of this tutorial, the application will be called
ng new your-app
Then go to the project catalog in the console and build a production version of the project.
cd your-app ng build --prod
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.
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.
Hey, I usually learn new things about IT after work. Last time I said I'd learn how to make dockers in my spare time. Below is a recipe for a well-built image...
I started to add videos showing the operation of some of the solutions I describe on my blog. Something came to see how the entry about Web share button works...
Learn how to quickly and easily create a sticky header in your project. It's a quite popular UI pattern that helps you get back to the page header quickly when...
For some time now, mobile browsers have been able to use the native share option from operating systems, as we usually see in mobile applications. According to...
What is Push Notification? A notification is a small message that may pop up on your computer or phone. It allows the site to re-engage the user who previously...