Hosting a Website on IIS: A Step-by-Step Guide
Local Setup
Step 1: Clone and Configure the Repository
- Clone the repository to your local machine from github by downloading the ZIP file from GitHub or using git clone command .
- Extract the contents to your desired location.
- Open the extracted folder in Visual Studio Code.
- Install Node.js on your machine.
- Run npm install in the root folder and then navigate to the frontend folder and run npm install again.
- Build the frontend by running npm run build.
- Now you can run both the frontend and backend locally.
Setting Up IIS
Frontend Configuration
Step 1: Enable IIS on the Server- Search for "appwiz.cpl" in the Windows search bar and open it.
- Click on "Turn Windows features on or off" in the left panel.
- Select "Internet Information Services," and click "OK."
- Search for "IIS Manager" on your system.
- Right-click on "Sites" and choose "Add Website."
- Fill in the required details, including the site name, path to the build folder, port number, and IP address.
- Go to the application pool, right-click on the site name, and click "Basic Settings."
- Change the ".NET clr version" to "No Managed Code" and press "OK."
- Open Windows Defender Firewall settings.
- Click on "Inbound Rules" in the left panel and add a new rule.
- Select the port option and add the specified port number used in while hosting frontend on iis .
- Complete the rule creation process.
- Install URL Rewrite from here - https://www.iis.net/downloads/microsoft/url-rewrite
- Add a web.config file to the frontend build folder
<?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>
</system.webServer>
</configuration>
Backend Configuration
Prerequisites
- Install node-iis -https://github.com/azure/iisnode/releases/download/v0.2.21/iisnode-full-v0.2.21-x64.msi.
- Install URL Rewrite - https://www.iis.net/downloads/microsoft/url-rewrite
Step 2: Host the Website Locally
- Search for "IIS Manager" on your system.
- Right-click on "Sites" and choose "Add Website."
- Fill in the required details, including the site name, path to the build folder, port number, and IP address.
- Go to the application pool, right-click on the site name, and click "Basic Settings."
- Change the ".NET clr version" to "No Managed Code" and press "OK."
- Delete all files except the build folder.
- Install URL Rewrite from here - https://www.iis.net/downloads/microsoft/url-rewrite.
- Add a web.config file to the backend folder .
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="WebAPI.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="nodejs">
<match url="(.*)" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="/WebAPI.js" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<add segment="node_modules" />
<add segment="iisnode" />
</hiddenSegments>
</requestFiltering>
</security>
</system.webServer>
</configuration>
- Follow the steps given in the below video Steps to resolve HTTP Error 500.19 in IIS (Windows 10) - YouTube
- Then there will be a new error that will come in to resolve that go to the c drive in the device the in users > admin > select properties > security > add new iis users with full permission and apply the changes Refer- https://bobcares.com/blog/iisnode-encountered-an-error-when-processing-the-request/.
Step 5: Configure Firewall for LAN Access (if needed)
- Follow the same steps as in the frontend configuration.
Congratulations! You've successfully set up and hosted your website on IIS.
Nice👍
ReplyDelete