04-14-2024, 11:47 PM
When you want to host an Angular, React, or Vue.js application on IIS, it’s actually a pretty straightforward process. I’ve done it a bunch of times, and I often find myself helping friends with the same issue. So let’s break it down together.
First off, you need your application built and ready to go. When you run the build command for your Angular, React, or Vue.js app, it usually generates a bunch of static files in a build or dist directory. You’ll find HTML, CSS, JavaScript, and maybe some images or fonts. Make sure you know where that output folder is because that’s where IIS will be serving files from.
Before doing anything, you need to ensure that IIS is installed on your machine. If you’ve been using Windows, you can easily add this feature through the Control Panel or Windows Settings. Just search for "Turn Windows features on or off," find Internet Information Services in the list, and check all the necessary boxes. You might already have it installed, but it’s worth confirming if you don’t remember. Once you’ve checked this, restart your machine to make sure everything is in order.
After that, open up IIS Manager. You can find it quickly by typing “IIS” into your start menu. When it’s up, you’ll see your local machine listed in the left panel. Right-click on it and choose to create a new site. This is where you’re going to configure everything for your app.
You’ll need to give your new site a name. It can be anything you want, but I usually go for something recognizable, like the name of the app I’m hosting. Then you’ll need to specify the physical path. This is where you point IIS to that build or dist folder we talked about earlier. So browse to that folder and select it.
After you’ve set the site name and physical path, you need to choose a port. By default, HTTP is on port 80, but if you’re running something else there, you can pick a different port, like 8080 or something. Just make sure you remember this choice because you’ll need it to access your application later.
Once you’ve set that up, hit OK, and your site should be created. Now, it’s almost live. But hang on, we’ve got a couple more steps to work through to ensure it works properly.
When hosting single-page applications like those built with Angular, React, or Vue, you can run into issues with routing. Since these frameworks use the HTML5 History API, if you try to navigate to a route directly, IIS might not find the file because it doesn’t know about that route. To handle this, you’ll want to configure a web.config file at the root of your build folder.
If you don’t have a web.config file already, create one and open it in a text editor. Here’s what I usually put in there:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React 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>
What this does is tell IIS, “Hey, if it can’t find a specific file or directory when someone requests a URL, just serve the index.html file instead.” This way, your single-page app can handle its own routing. Just make sure the rewrite module is installed in IIS as well, which is typically the case. It seems like a minor step, but it really saves you from a lot of headache if someone tries to, say, directly hit yourapp.com/some-route.
Next, if your application uses any kind of BrowserSync or if you're relying on another port for development, you should check your CORS settings if you’re planning to interact with APIs. Sometimes, when you pull from an API, dev environments might block requests based on origin. This won’t apply to your local development if you’re just serving files directly, but it’s worth considering for production deployments.
Now, let’s talk security. You’ll want to make sure that your application is secure. While hosting static files, you probably won’t need a complex setup, but you should still consider using HTTPS instead of HTTP if your application will interact with any user data. You can set this up through the IIS Manager by creating or importing an SSL certificate. Trust me, it’s just one more layer of protection, and it’s really the standard nowadays.
You’ll also want to ensure that your application is optimized. Minifying JavaScript and CSS files and enabling caching can significantly improve loading times. Most build tools can handle this, but sometimes it's worth checking if you’re getting all the benefits. Angular and React, for instance, have options to minify and bundle your files right in their configuration.
Once everything is set and looks good on your local machine, it’s time to test it out. Open your web browser and type in your server’s address along with the port number you picked earlier. If you’re using port 80, just the name of the site will do. If you’re on a different port, you have to include it like this: http://localhost:8080/.
If all goes well, you should see your app loading just like it does in your dev environment. Check out the routes too. Go ahead and try navigating to different parts of your application. If there’s an issue with routing, it might be good to revisit that web.config file and ensure the rewrite rules are set up correctly.
If you run into issues, don't panic. Check out the IIS logs in the C:\inetpub\logs\LogFiles directory. This is where you can trace back any errors that might pop up. Usually, you’ll just need to correct a path or make sure that nothing's being missed in the routing.
Sometimes, you’ll need to adjust some permission settings especially if your app needs to write any files or use specific resources. Right-click on your application folder and head to properties. From there, you can manage the security settings and give your IIS_IUSRS group the necessary permissions to access your files.
Remember, hosting an Angular, React, or Vue.js app on IIS can have its quirks, but once you get the hang of it, it really becomes an easy process. Every app might require some individual tweaking, but what I’ve shared should cover the base.
If you ever want to ask your server to do more, like run a backend service or connect to a database, that’s another layer we can explore. But for now, enjoy the satisfaction of having your static files served correctly and feel free to reach out if you hit any snags along the way!
I hope you found my post useful. By the way, do you have a good Windows Server backup solution in place? In this post I explain how to back up Windows Server properly.
First off, you need your application built and ready to go. When you run the build command for your Angular, React, or Vue.js app, it usually generates a bunch of static files in a build or dist directory. You’ll find HTML, CSS, JavaScript, and maybe some images or fonts. Make sure you know where that output folder is because that’s where IIS will be serving files from.
Before doing anything, you need to ensure that IIS is installed on your machine. If you’ve been using Windows, you can easily add this feature through the Control Panel or Windows Settings. Just search for "Turn Windows features on or off," find Internet Information Services in the list, and check all the necessary boxes. You might already have it installed, but it’s worth confirming if you don’t remember. Once you’ve checked this, restart your machine to make sure everything is in order.
After that, open up IIS Manager. You can find it quickly by typing “IIS” into your start menu. When it’s up, you’ll see your local machine listed in the left panel. Right-click on it and choose to create a new site. This is where you’re going to configure everything for your app.
You’ll need to give your new site a name. It can be anything you want, but I usually go for something recognizable, like the name of the app I’m hosting. Then you’ll need to specify the physical path. This is where you point IIS to that build or dist folder we talked about earlier. So browse to that folder and select it.
After you’ve set the site name and physical path, you need to choose a port. By default, HTTP is on port 80, but if you’re running something else there, you can pick a different port, like 8080 or something. Just make sure you remember this choice because you’ll need it to access your application later.
Once you’ve set that up, hit OK, and your site should be created. Now, it’s almost live. But hang on, we’ve got a couple more steps to work through to ensure it works properly.
When hosting single-page applications like those built with Angular, React, or Vue, you can run into issues with routing. Since these frameworks use the HTML5 History API, if you try to navigate to a route directly, IIS might not find the file because it doesn’t know about that route. To handle this, you’ll want to configure a web.config file at the root of your build folder.
If you don’t have a web.config file already, create one and open it in a text editor. Here’s what I usually put in there:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React 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>
What this does is tell IIS, “Hey, if it can’t find a specific file or directory when someone requests a URL, just serve the index.html file instead.” This way, your single-page app can handle its own routing. Just make sure the rewrite module is installed in IIS as well, which is typically the case. It seems like a minor step, but it really saves you from a lot of headache if someone tries to, say, directly hit yourapp.com/some-route.
Next, if your application uses any kind of BrowserSync or if you're relying on another port for development, you should check your CORS settings if you’re planning to interact with APIs. Sometimes, when you pull from an API, dev environments might block requests based on origin. This won’t apply to your local development if you’re just serving files directly, but it’s worth considering for production deployments.
Now, let’s talk security. You’ll want to make sure that your application is secure. While hosting static files, you probably won’t need a complex setup, but you should still consider using HTTPS instead of HTTP if your application will interact with any user data. You can set this up through the IIS Manager by creating or importing an SSL certificate. Trust me, it’s just one more layer of protection, and it’s really the standard nowadays.
You’ll also want to ensure that your application is optimized. Minifying JavaScript and CSS files and enabling caching can significantly improve loading times. Most build tools can handle this, but sometimes it's worth checking if you’re getting all the benefits. Angular and React, for instance, have options to minify and bundle your files right in their configuration.
Once everything is set and looks good on your local machine, it’s time to test it out. Open your web browser and type in your server’s address along with the port number you picked earlier. If you’re using port 80, just the name of the site will do. If you’re on a different port, you have to include it like this: http://localhost:8080/.
If all goes well, you should see your app loading just like it does in your dev environment. Check out the routes too. Go ahead and try navigating to different parts of your application. If there’s an issue with routing, it might be good to revisit that web.config file and ensure the rewrite rules are set up correctly.
If you run into issues, don't panic. Check out the IIS logs in the C:\inetpub\logs\LogFiles directory. This is where you can trace back any errors that might pop up. Usually, you’ll just need to correct a path or make sure that nothing's being missed in the routing.
Sometimes, you’ll need to adjust some permission settings especially if your app needs to write any files or use specific resources. Right-click on your application folder and head to properties. From there, you can manage the security settings and give your IIS_IUSRS group the necessary permissions to access your files.
Remember, hosting an Angular, React, or Vue.js app on IIS can have its quirks, but once you get the hang of it, it really becomes an easy process. Every app might require some individual tweaking, but what I’ve shared should cover the base.
If you ever want to ask your server to do more, like run a backend service or connect to a database, that’s another layer we can explore. But for now, enjoy the satisfaction of having your static files served correctly and feel free to reach out if you hit any snags along the way!
I hope you found my post useful. By the way, do you have a good Windows Server backup solution in place? In this post I explain how to back up Windows Server properly.
