Deploying and Hosting Angular Apps and Websites on IPFS and the Internet Computer
Instructions for deploying modern typescript-based Angular (and AngularJS) web applications and websites to the InterPlanetary File System (IFPS) and the Internet Computer (IC) Mainnet.
Tools Used:
Angular 13
GitHub
IPFS (or Internet Computer)
ENS
eth.link & eth.limo
Step 1. Create an Angular Application
If you already have a functioning Angular app you may skip this step.
Make sure you have Node.js and the npm package manager are installed
Install the Angular CLI via: npm install -g @angular/cli
Create a new Angular app via: ng new app-name
Step 2. Setup a Free Account with Fleek.co
Create an account at https://app.fleek.co/#/auth/sign-in (*note - signing up with a digital wallet may require signing a transaction, this is normal)
Click the ‘Hosting’ section on the left side of the account page
Click the ‘Add New Site’ button in the main part of the screen
Connect a GitHub account and provide access to the repository with the Angular app you want to deploy
Select the repository for the Angular app you want to publish. Your screen should look something like the below screenshot:
Step 3. Deploying Your Angular App
Select the location you want your code deployed to (IPFS for the InterPlanetary File System, or the Internet Computer Mainnet), and click the continue button.
Select the proper repository branch, and fill in the appropriate ‘build settings’ as shown below, then click the Deploy site button when ready!
Repository branch = master
Framework = Other
Docker image = node:latest
Build Command = npm install & npm run build
Publish directory = www
Things to Watch Out For
Deployment can take a few minutes to complete, and your site may take a few minutes after deployment before showing up.
Fleek will give you a default URL that is compatible with most browsers (e.g. my fleek default URL is https://preston.on.fleek.co/).
You can customize this default URL after deployment by clicking into your site from the hosting section, going to the settings, and clicking the ‘Change Site Name’ button.
URLs with .fleek.co are compatible with most browsers, but ENS domains have historically not been compatible with the most popular browsers like Safari and Google Chrome, although crypto-native browsers like Brave are compatible with ENS domains.
Fleek also offers automatic support for .eth.link and .eth.limo domains, both of which are compatible with popular browsers like Safari and Chrome, as discussed more fully below.
Your build settings may differ depending on your Angular version, code, or future changes to Fleek or the relevant networks.
ENS based domains may perform slower due to their decentralized nature, and certain domains may fluctuate in performance. My preferred domain is usually .eth.limo due to compatibility, decentralized, & performance.
Step 4. Using ENS Domains
Click into your site from the hosting section, then go to settings, and then click domain management.
Look for the ENS section towards the main part of the screen, and click the ‘Add ENS’ button.
Enter an ENS domain that you own with the digital wallet you are using with your Fleek account. Click the ‘Verify’ button.
Fleek will show the address owner of the ENS domain you entered for you to verify your ownership. If everything looks correct like shown below but with your information, click the ‘Yes, Add ENS’ button.
You will then need to click ‘Set content hash’ on the Settings screen, and proceed through to click the ‘Set content hash’ button.
Make sure your wallet is on the proper network (ETH for this IPFS example).
You will be asked to sign a transaction and pay a small network fee ($2-$5 at the time of this article).
Once your transaction goes through and confirms, your ENS domain will be live. Upon visiting your ENS domain, you will see routing to an IPFS page like: https://k51qzi5uqu5di48tuvqqpx2j4fbvaljgf0qe4sabgydk6cbijj9o8ick9eeopj.ipns.dweb.link
As mentioned in the previous section, ENS domains are not compatible with common browsers like Safari and Google Chrome, but Fleek automatically provides .eth.link and .eth.limo domains that accompany any deployed ENS domain, providing you with compatibility for common browsers like Safari and Chrome. Since this is done automatically, just visit yoursite.eth.limo after deploying to ENS to try it out!
Additional Resources
You may delete your hosted site by visiting the site’s settings and clicking the red Delete button towards the bottom. It may take some time before your site is entirely removed from the applicable networks and/or domains.
Angular - https://angular.io/docs
Fleek - https://docs.fleek.co
AngularJS on Fleek - https://blog.fleek.co/posts/angularjs-on-ipfs-on-fleek
ENS on Fleek - https://docs.fleek.co/domain-management/ens-domains
ENS Domains - https://app.ens.domains
My Example Websites - ericpreston.eth.limo, ericpreston.eth, ericpreston.xyz