--- title: "Deploy Angular App with GraphQL on IIS & Azure (Part 7)" published_at: "2024-07-08T11:16:14+00:00" modified_at: "2025-11-21T09:17:15+00:00" url: "https://www.syncfusion.com/blogs/post/deploy-graphql-angular-on-iss-azure-7" excerpt: "Let’s see how to deploy a full-stack web app using Angular and GraphQL on both IIS and Azure App Service." taxonomy_category: - "Angular" - "Development" - "Web" taxonomy_post_tag: - "Angular" - "Azure" - "deployment" - "GraphQL" - "Web Development" --- # Deploy Angular App with GraphQL on IIS & Azure (Part 7) [Ankit Sharma](https://www.syncfusion.com/blogs/author/ankit-sharma) ![Deploy Angular App with GraphQL on IIS & Azure (Part 7)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Deploying-a-Full-Stack-Web-App-Using-Angular-and-GraphQL-IIS-and-Azure-Deployment-Part-7.png) **TL;DR:** This blog contains the step-by-step procedures for deploying the full-stack web app built with Angular and GraphQL on both IIS and Azure App Service. It covers preparing the application and enabling IIS on Windows, configuring Azure resources, and troubleshooting common hosting issues. Welcome to our exciting journey of building a full-stack web application using Angular and GraphQL. In the [previous article of this series](https://www.syncfusion.com/blogs/post/build-dynamic-watchlist-angular-graphql) , we added the watchlist feature to our application, allowing users to add or remove movies from their watchlist. In this article, we will learn to deploy our MovieApp on both IIS and Azure App Service. Let’s get started! ## Prepare the app for deployment To prepare our app for deployment, we must ensure it builds successfully. The Angular app has a budget for the bundle size in the **angular.json** file. To run the application, navigate to the **clientApp** folder and use the following command. ``` ng build ``` You will see a bundle size exceeded error, as shown in the following screenshot.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Bundle-size-limit-reached-See-error.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Bundle-size-limit-reached-See-error.png) This error indicates that the current bundle size is 4.94 MB, exceeding the allotted 1 MB budget. To resolve this issue, update the bundle budget to 5 MB in the **angular.json** file. ``` "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "5mb" // Update this line. }, // Existing code. ], }, ``` Next, update the GraphQL server endpoint URL in the **src\app\graphql.module.ts** file. Refer to the following code to update the URL. ``` const uri = 'https://localhost:7214/graphql'; // Current code. const uri = 'graphql'; // update to this. ``` We’re hosting the GraphQL server and the Angular client app on the same server. As a result, the base URL for the server and client will be identical. This modification ensures that our client can connect with the server using the **graphql** endpoint name on the same base URL. However, if your GraphQL server and Angular client app are hosted on different servers, you’ll need to provide the complete GraphQL server URL. ## Enable IIS on a Windows machine To enable Internet Information Services (IIS) on Windows 11, follow these steps: 1. Click on the search icon in the Windows 11 taskbar. 2. Type **features** and select ** Turn Windows features on or off**. This will open a window where you can enable various built-in options, including IIS. 3. Expand the IIS option by clicking on the plus icon. Under it, you will find a list of suboptions. 4. Select all the options under Web Management Tools & World Wide Web Services. This will not only install IIS but also the IIS Management Console, along with application features, common HTTP features, health diagnosis, performance, and security features. 5. After selecting these options, click **OK**. Refer to the following image. ## Install URL rewrite module The URL rewrite module allows site administrators to create custom rules for implementing user-friendly and SEO-enhanced URLs. To get started, check out the detailed instructions in the [Microsoft documentation](https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-the-url-rewrite-module) . Follow these steps to install it: 1. Navigate to the [URL Rewrite download page](https://www.iis.net/downloads/microsoft/url-rewrite) . 2. Scroll down to the **Download URL Rewrite Module 2.1** section. 3. Download the installer that matches your preferred language and machine configuration. Refer to the following image. ## Install the .NET Core hosting bundle To power your app with the .NET Runtime and IIS support, you’ll need the .NET Core Hosting Bundle. First, navigate to the [.NET downloads page](https://dotnet.microsoft.com/en-us/download/dotnet) and click on the latest stable version of .NET. For our app, we are using **.NET 8.0**, so select that option. Refer to the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/NET-Core-Bundle-for-IIS-apps-select-.NET-version.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/NET-Core-Bundle-for-IIS-apps-select-.NET-version.png) On the download page, you’ll find a table under the Download .NET (Current) heading listing .NET versions. Focus on the Run apps – Runtime column to find the row for the specific .NET Core runtime version you need. In that row, under the **Windows** section, locate the ** Hosting Bundle** link. This link will take you to the download page for the .NET Core Hosting Bundle for Windows. Refer to the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/NET-Core-Windows-Hosting-Bundle-in-Run-apps-table..png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/NET-Core-Windows-Hosting-Bundle-in-Run-apps-table..png) **Note:** **1.** Install the .NET Core hosting bundle after installing IIS. **2.** Restart your machine after installing the .NET Core Hosting Bundle. ## Publish the MovieApp app to IIS After setting up IIS and installing the necessary dependencies, it’s time to publish the **MovieApp** project: 1. In your solution explorer, right-click on the **MovieApp** project. 2. From the context menu, choose **Publish**. 3. In the Publish window, click on the **Folder** link, then click ** Next** to proceed. 4. In the next window, specify the path of the folder where you want to publish your app. Click **Finish** to confirm your selection. 5. Finally, click **Publish** at the top of the window to start the building and publishing process. Refer to the following image. If there are no build errors, the app will be successfully published to the specified folder path. ## Configuring IIS To start with IIS, open the Windows 11 search box, type **IIS**, and select ** Internet Information Services (IIS)** to launch the web server manager. To create a website: 1. Open IIS Manager. Right-click on **Sites** in the left pane. 2. Select **Add Website**. 3. Fill in the details: - **Site name:** Enter a name for your site. For this demo, we’ll use ** MovieApp**. - **Physical path:** Provide the folder path where you’ve published the MovieApp project. - **Hostname:** Specify the URL to access the app. For this demo, we’ll use ** movieapp.**** com**. 4. Click **OK** to create the website. Next, you’ll need to configure the application pool: 1. Application pools are automatically created for each website using the site name you provided. Locate the pool corresponding to your website. 2. Double-click on the pool. In the edit Application Pools window, select **No Managed Code** from the .NET CLR version dropdown. 3. Click **OK** to save the settings. Refer to the following image. ## Configure the DNS host To configure the host file on your machine in Windows 11, follow these steps: 1. Before editing the host file, create a backup. This ensures that you can restore it if anything goes wrong. 2. Launch File Explorer and navigate to **C:\Windows\System32\drivers\etc**. 3. Copy the host file to another location for safekeeping. 4. Open Notepad as an administrator. 5. In Notepad, go to the **File** menu and choose ** Open** (or use the shortcut ** Ctrl+O**). 6. Paste the host file path (**C:\Windows\System32\drivers\etc\hosts**) into the File name field in the Open dialog box. Press ** Enter** to open the hosts’ file. 7. Once the host file is open in Notepad, scroll to the end of the file and add a new line.``` 127.0.0.1 movieapp.com ``` 1. After adding this line, save the file. Refer to the following image. ## Execution demo After executing the previous code examples, open a browser and navigate to the URL [http://movieapp.com/](http://movieapp.com/) . You will see the output as shown in the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Run-code-visit-link.jpg](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Run-code-visit-link.jpg) ## Troubleshooting common hosting issues with IIS Let’s address the common issues related to hosting a .NET app. ### DNS Not Found Error If you encounter a DNS not found error when trying to open your website, try the following: - Verify that the hostname (URL) is correctly configured in the host file located at **C:\Windows\System32\drivers\etc\hosts**. - Ensure your machine is not connected to any VPN server, as it might interfere with DNS resolution. - If you’re using a web proxy, temporarily disable it and try accessing the website again. ### HTTP error 500.19 – internal server error This error occurs due to invalid configuration data. To resolve it: - Ensure proper permissions for the publish folder (where your app resides). - Grant read permission to the IIS_IUSRS group in the publish folder to access the **Web.config** file and other necessary files. ### 500 internal server error with data not populated Your website loads, but data isn’t populated, and you encounter a 500 internal server error. To resolve this: - Ensure that your database connection string is in the correct format. - The user ID specified in the connection string should have both **db_datareader** and ** db_datawriter** - If the issue persists, consider providing the user with **db_owner** permission to troubleshoot. **Note:** If you republish the app, remember to refresh your website and the application pool in IIS. With these issues addressed, we’ve successfully deployed the app to IIS. Now, let’s see how to deploy it to Azure App Service. ## Create a SQL Server resource on the Azure portal Before proceeding, ensure you have an [Azure subscription](https://azure.microsoft.com/en-in/) account. ### Step 1: Create SQL Server on Azure We will create an SQL Server on Azure to handle our database operations. Follow these steps: 1. Open the [Microsoft Azure portal](https://portal.azure.com/#home) . 2. Click **Create a resource**. 3. Locate the SQL Database resource and click **Create**. Refer to the following image. ### Step 2: Fill in SQL Database details A new page with the title “**Create SQL Database**” will appear. On this page, you will be asked to furnish the details for your SQL database. Provide the details in the basics tab as follows: - **Subscription**: Choose your Azure subscription type from the dropdown menu. - **Resource group**: You have two options: - **Select an Existing Resource Group:** If you already have a resource group, pick it from the list. - **Create a New Resource Group:** If you don’t have one, click ** Create new** and provide a name for your new resource group (e.g., myResourceGroup). - **Database name**: Assign a unique name to your database, ensuring that the name adheres to the following validation criteria.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Name-your-database-unique-follows-validation-rules..png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Name-your-database-unique-follows-validation-rules..png) ### Step 3: Server configuration Click on **Create new** to set up a new server for your database. In the subsequent window, provide the following details. - **Server name**: Choose a unique server name (e.g., ** movieappdb**). Ensure that server names must be globally unique across all Azure servers. - **Location**: Select a location from the dropdown list. - **Authentication method**: Select an authentication method according to your requirements. In this demo, we will use SQL authentication. - **Server admin login**: Set a username (e.g., adminuser). - **Password**: Create a password that meets the requirements and confirm it. Refer to the following image to understand the server configuration. ### Step 4: Configure database performance and storage 1. Click on **Configure database**. In the next window, select the desired service tier option from the dropdown. 2. Click **Next** until you reach the ** Review + create** tab. 3. Finally, click **Create** at the bottom of this tab to initiate the creation of your SQL database. Refer to the following image. ## Update the connection string in the application With your database now created, the next step is to set up access so that you can connect to it from your local machine and other Azure resources, like the Azure App Service. To allow the required access to the database: 1. Click **Set Server Firewall** at the top of the page. 2. Under the **Public access** tab, select ** Selected networks**. 3. Scroll down to the **Exceptions** section. Check ** Allow Azure services and resources to access this server**checkbox. 4. Click **Save** at the bottom. To connect to this database, you will need a connection string. First, click on **Connection strings** in the ** Settings** menu on the left side of the page. Then, select the ** ADO.NET** tab and copy the provided connection string. Refer to the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Connect-to-Azure-database-Firewall-connection-string..gif](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Connect-to-Azure-database-Firewall-connection-string..gif) Next, open the **appsettings.json** file in your project and replace the existing local database connection string with the connection string of Azure SQL Server. Refer to the following code. ``` "ConnectionStrings": { "DefaultConnection": "Server=tcp:moviedbserver.database.windows.net,1433;Initial Catalog=MovieDB;Persist Security Info=False;User ID={YourUserID};Password={YourPassword};MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;" }, ``` ## Creating database objects for Azure SQL Database In Azure SQL Database, the tables needed for our application aren’t automatically created. Let’s walk through the process of creating them. ### Step 1: Connect to Azure SQL server Launch the **SQL Server Management Studio** and connect to your Azure SQL Server by providing the following details: - **Server name**: Use the server name from the connection string. - **Authentication**: Choose SQL Server authentication. - **Login**: Enter the server’s user ID. - **Password**: Provide the password associated with the server. - Click **Connect** to proceed. ### Step 2: Setting up firewall rules When connecting from your local machine, you’ll be prompted to set up a firewall rule. Follow the steps mentioned below: - Log in with your Azure account credentials. - Select **Add my client IP address**. - Click **OK** to confirm. Refer to the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Azure-Firewall-Allow-local-machine.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Azure-Firewall-Allow-local-machine.png) ### Step 3: Creating tables Once connected, create all the necessary tables in the database. The SQL scripts for table creation are in the [Configure the database section of Part 1](https://www.syncfusion.com/blogs/post/full-stack-web-app-angular-graphql#configure-the-database) of this series. Execute these scripts to generate the tables. ### Step 4: Running the application Now, launch the application from Visual Studio. Initially, it will display no movie data, but you can view genre data. Refer to the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Run-app-no-movies-yet..png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Run-app-no-movies-yet..png) ## Publish the MovieApp app to Azure To publish your MovieApp project: 1. Right-click on the MovieApp project in your solution explorer. 2. Select **Publish** from the context menu. This action will open a Publish window. 3. In the Publish window, choose **Azure** and click ** Next**. 4. You’ll be prompted to connect to your Azure account from Visual Studio. Once the login is successful, it will ask you to select the Azure service to host the application. Choose **Azure App Service** (Windows) and click ** Next**. 5. The next window will display all the app services associated with your account. Since we want to create a new app service for this app, click **Create New**. In the new window, provide the following details for your app service: - **Name:** Choose a name that is universally unique and not used by anyone else. - **Subscription name**: Select the appropriate subscription from your account configuration. - **Resource group:** Choose a resource group or create a new one. - **Hosting Plan:** You can either select an existing plan or create a new one. Refer to the following image. Then, click **Create** to initiate the creation of your Azure App Service instance. Once the app service is created, select its name and click ** Finish**. On the next page, review all the provided information. Click **Publish** at the top to start building and publishing your app. After the publication is successful, the URL will automatically launch in your machine’s default browser. The website URL will be **.azurewebsites.net**, and the webpage looks like the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Deploy-app-to-Azure-Click-Publish-website-opens-in-your-browser..png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Deploy-app-to-Azure-Click-Publish-website-opens-in-your-browser..png) Since the database tables are empty, no data is displayed on the page. To correct this, add an entry for the **Admin** user in the UserMaster database, as described in the [Update the database section of Part 5 of this series](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-5) . Log in as the admin user to access the app and add some movie data to populate the database tables. Once you’ve added data, you can validate that the app is works as expected. ## Execution demo The application created in this series of articles is available at [MovieApp](https://movieapp-angular-graphql.azurewebsites.net/) . ## GitHub resource For more details, refer to the complete source code for the [full-stack web app with Angular and GraphQL on GitHub](https://github.com/SyncfusionExamples/full-stack-web-app-using-angular-and-graphql) . ## Summary Thank you for reading this article. In it, we learned to configure the IIS on a Windows machine and deploy a full-stack .NET app on it. We created an SQL Server database on Azure and configured it to be used as the database provider in our app. Finally, we deployed the app on the Azure app service. Whether you’re already a valued Syncfusion user or new to our platform, we extend an invitation to explore our [Angular components](https://www.syncfusion.com/angular-components) with the convenience of a [free trial](https://www.syncfusion.com/downloads/angular) . This trial allows you to experience the full potential of our components to enhance your app’s user interface and functionality. Our dedicated support system is readily available if you need guidance or have any inquiries. Contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/angular) . Your success is our priority, and we’re always delighted to assist you on your development journey! ## Related Blogs [A Full-Stack Web App Using Angular and GraphQL: Part 1](https://www.syncfusion.com/blogs/post/full-stack-web-app-angular-graphql) [A Full-Stack Web App Using Angular and GraphQL: Data Fetching and Manipulation (Part 2)](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-2) [A Full-Stack Web App Using Angular and GraphQL: Perform Edit, Delete, and Advanced Filtering (Part 3)](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-3) [A Full-Stack Web App Using Angular and GraphQL: Adding User Registration Functionality (Part 4)](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-4) [A Full-Stack Web App Using Angular and GraphQL: Adding Login and Authorization Functionalities (Part 5)](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-5) [Build a Dynamic Watchlist for Your Web App with Angular & GraphQL (Part 6)](https://www.syncfusion.com/blogs/post/build-dynamic-watchlist-angular-graphql)