This guide provides instructions for deploying modern typescript-based Angular web applications and websites to the InterPlanetary File System (IFPS) and the Internet Computer (IC) Mainnet. Information is also included for deploying AngularJS sites.

Tools Used:

• Angular 13
• GitHub
• www.fleek.co
• 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 (compatibility, decentralized, & decent 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

• Follow me on Twitter - @ericprestonETH