Hosting an Angular application on IIS involves a few straightforward steps. Follow this step-by-step guide to seamlessly deploy your Angular project on IIS. Step 1: Open Your Angular Project in Visual Studio Code Review the build command in the package.json file. By default, it's usually set to ng build. Step 2: Run the Build Command Execute the ng build command in the terminal to compile your Angular application. This command creates a 'dist' folder, typically located at the specified output path in the angular.json file. Step 3: Install IIS Ensure that IIS is installed on your machine. You can install it through the "Turn Windows features on or off" option in the Control Panel. Step 4: Create a New Site in IIS Open the IIS Manager. In the Connections pane, right-click on the "Sites" node and select "Add Website." Fill in the required information, such as the Site name, Physical path to the folder , and choose a port. Step 5: Configure URL Rewrite (Optional) If your Angular application uses routing, consider configuring URL Rewrite for proper routing. Create a 'web.config' file in your 'dist' folder with the appropriate configurations. Here's a simple example of a web.config file for an Angular application with routing.This file helps configure how the server handles URL requests. ---------------------------------------------------------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Angular Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> <staticContent> <remove fileExtension=".json" /> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> </system.webServer> </configuration> ---------------------------------------------------------------------------------------------------------------- Step 6: Restart IIS After making these changes, restart IIS to apply the configurations. Step 7: Access Your Angular Application Open a web browser and navigate to http://localhost:yourport (replace 'yourport' with the specified port from Step 4). Now, your Angular application is hosted on IIS. Access it through the specified port. If any issues arise, check the IIS logs for more information. Customize these instructions based on your specific requirements and environment. Thanks!
In this blog, I will guide you on the power of CI/CD in GitHub with a step-by-step guide. Learn to set up automated workflows, boost project efficiency, and streamline development processes for better code quality and faster deployments. Certainly! It seems that I've encountered a challenge in my current development workflow when deploying minor code changes. The existing process involves manually publishing code from Visual Studio, creating backups of the current code on the server, and then replacing it with the new code. To address this, it's advisable to transition to an automated solution utilizing a Continuous Integration/Continuous Deployment (CI/CD) pipeline. By implementing a CI/CD pipeline, you can streamline and automate the deployment process, making it more efficient and reducing the risk of manual errors. The CI/CD pipeline will handle tasks such as code compilation, testing, and deployment automatically, ensuring that the latest changes are seamlessly deployed to the desired environment. This transition will not only save time but also enhance the reliability of your deployment process, allowing your team to focus more on development and less on manual deployment tasks. For additional information, refer to the steps outlined below for guidance. Step 1: Go to your repository and click on the Actions tab Step 2: Now, Select the workflow according to your development. Here I am using .NET workflow. Step 3: Now you can see the default pipeline as below. In that, you can change your branch as per your requirement. Step 4: You can now incorporate three new sections as outlined below to build the code and publish the folder as an artifact. - name: Build and publish run: | dotnet restore dotnet build dotnet publish -o publish - name: Zip output run: | cd publish zip -r ../output . - name: Upload zip archive uses: actions/upload-artifact@v2 with: name: test path: ./publish Upon integrating this code, your YAML file will now appear as follows. In the code above, you have the flexibility to rename the zip file or the publish folder according to your preferences. Build and Publish : This step is responsible for building and publishing the code. Commands: dotnet restore: Restores the project's dependencies. dotnet build: Compiles the project. dotnet publish -o publish: Publishes the project output to the 'publish' folder. Zip Output : This step involves compressing the contents of the 'publish' folder into a zip file. Commands: cd publish: Changes the working directory to the 'publish' folder. zip -r ../output .: Creates a zip file named 'output' containing the contents of the 'publish' folder. Upload Zip Archive :This step uploads the zip archive to the workflow run as an artifact. Using: The actions/upload-artifact@v2 GitHub Action. Configuration: name: test: Specifies the name of the artifact as 'test'. path: ./publish: Indicates the path of the folder to be archived and uploaded. By using the given code, you receive a finalized published folder prepared for deployment on the server. However, the deployment process on the server requires manual intervention. To access the published folder, navigate to the "Actions" tab. Click on the "test" workflow, and you can download the published folder from there. Step 5: In the steps mentioned above, you previously followed a manual process, but now you have transitioned to an automatic process. To automate the process, you'll need to install a self-hosted runner on the virtual machine where your application is hosted. What is Self-hosted runner? self-hosted runner is a system that you deploy and manage to execute jobs from GitHub Actions on GitHub.com. To install the self-hosted runner, follow the basic steps. Under your repository name, click Settings. If you cannot see the "Settings" tab, select the dropdown menu, then click Settings. In the left sidebar, click Actions, then click Runners and then click on New self-hosted runner. Select the operating system image and architecture of your self-hosted runner machine. Open a shell on your self-hosted runner machine and run each shell command in the order shown. For more details you can visit https://docs.github.com/en/enterprise-cloud@latest/actions/hosting-your-own-runners/managing-self-hosted-runners/adding-self-hosted-runners Step 6: To automate the process, you can remove the last two sections, "Zip Output" and "Upload Zip Archive," and replace them with the following code. - name: Backup & Deploy run: | $datestamp = Get-Date -Format "yyyyMMddHHmmss" cd publish Remove-Item web.config Remove-Item appsettings.json Remove-Item appsettings.Development.json Stop-WebSite 'DemoGitHubPipeline' Compress-Archive D:\Published\DemoGitHubPipeline D:\Published\Backup\Backup_$datestamp.zip Copy-Item * D:\Published\DemoGitHubPipeline -Recurse -Force Start-WebSite 'DemoGitHubPipeline' Backup & Deploy : This step is responsible for creating a backup, making necessary modifications, and deploying the application. Commands: $datestamp = Get-Date -Format "yyyyMMddHHmmss": Retrieves the current date and time in the specified format. cd publish: Changes the working directory to the 'publish' folder. Remove-Item web.config: Deletes the 'web.config' file. Remove-Item appsettings.json: Deletes the 'appsettings.json' file. Remove-Item appsettings.Development.json: Deletes the 'appsettings.Development.json' file. Stop-WebSite 'DemoGitHubPipeline': Stops the website with the specified name. Compress-Archive D:\Published\DemoGitHubPipeline D:\Published\Backup\Backup_$datestamp.zip: Creates a compressed archive (zip) of the existing deployment with proper timestamp. Copy-Item * D:\Published\DemoGitHubPipeline -Recurse -Force: Copies all contents from the 'publish' folder to the deployment directory. Start-WebSite 'DemoGitHubPipeline': Restarts the website with the specified name. Note: Ensure that the paths and folder structures match the actual locations in your setup. Adjust the website name and paths based on your specific configuration. Conclusion: In summary, implementing a CI/CD pipeline in GitHub is a pivotal step towards achieving efficiency, reliability, and accelerated development cycles. The integration of CI/CD streamlines the software delivery process by automating testing, building, and deployment, leading to consistent and high-quality releases. GitHub Actions, with its native CI/CD capabilities, provides a powerful and flexible platform for orchestrating workflows. Leveraging its features, development teams can not only automate repetitive tasks but also ensure rapid feedback on code changes, enabling early detection of issues and facilitating collaboration.