# Deploying and Hosting Angular Apps and Websites on IPFS and the Internet Computer By [Eric Preston](https://paragraph.com/@ericpreston) · 2022-08-18 --- 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](http://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](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: ![app.fleek.co (hosting section) - GitHub account: 3preston, Repository: Eric-s-Website](https://storage.googleapis.com/papyrus_images/4ad919a92787da28587429588af350687e2a60040fb2d5653b3a2b55fd2e9233.png) app.fleek.co (hosting section) - GitHub account: 3preston, Repository: Eric-s-Website ### 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 ![Build settings for Angular 13 web app deployed to IPFS](https://storage.googleapis.com/papyrus_images/8753db6f8145239fb6518f1918db73bf2927671170336288f59c90a75c2a630c.png) Build settings for Angular 13 web app deployed to IPFS ### 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/](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**. ![The address shown should be your wallet, and the ENS domain should be one you own with that wallet and intend to use for your site.](https://storage.googleapis.com/papyrus_images/550bdf8db6d9f568fc6d49cdef96ad92b48dd1eaa8b55103ff203b55d3b675d7.png) The address shown should be your wallet, and the ENS domain should be one you own with that wallet and intend to use for your site. * 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](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](https://angular.io/docs) * **Fleek** - [https://docs.fleek.co](https://docs.fleek.co) * **AngularJS** on Fleek - [https://blog.fleek.co/posts/angularjs-on-ipfs-on-fleek](https://blog.fleek.co/posts/angularjs-on-ipfs-on-fleek) **ENS** on **Fleek** - [https://docs.fleek.co/domain-management/ens-domains](https://docs.fleek.co/domain-management/ens-domains) * **ENS Domains** - [https://app.ens.domains](https://app.ens.domains) * My **Example Websites** - ericpreston.eth.limo, ericpreston.eth, ericpreston.xyz * [**_Follow me on Twitter_** - @ericprestonETH](https://twitter.com/intent/follow?original_referer=http%3A%2F%2Flocalhost%3A8100%2F&ref_src=twsrc%5Etfw%7Ctwcamp%5Ebuttonembed%7Ctwterm%5Efollow%7Ctwgr%5EericprestonETH®ion=follow_link&screen_name=ericprestonETH) ![](https://storage.googleapis.com/papyrus_images/5946efb491087f1572ef65d5a4ead9cc0715dfd01c5933301992d697d7a1755c.jpg) --- *Originally published on [Eric Preston](https://paragraph.com/@ericpreston/deploying-and-hosting-angular-apps-and-websites-on-ipfs-and-the-internet-computer)*