NuxtJS Deploy to IIS - vue.js

I am trying to deploy my NuxtJS application on a new IIS server. I have installed latest Node and IISNode. Below are my web.config and server/index.js. Site Binding is on localhost:93 but I keep getting error - 'This page isn't working' http error 500. Appreciate your help.
web.config
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit https://azure.microsoft.com/en-us/blog/introduction-to-websockets-on-windows-azure-web-sites/ for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a Node.js site to be handled by the iisnode module -->
<add name="iisnode" path="server" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the Node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server" />
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in Node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
<add segment="node_modules" />
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<iisnode node_env="production" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>
server/index.js
const express = require('express');
const consola = require('consola');
const { Nuxt, Builder } = require('nuxt');
const app = express();
const config = require('../nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';
async function start() {
const nuxt = new Nuxt(config);
const { host, port } = nuxt.options.server;
if (config.dev) {
const builder = new Builder(nuxt);
await builder.build();
} else {
await nuxt.ready();
}
app.use(nuxt.render);
app.listen(port, host);
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
});
}
start();
This is the error SS:

Related

Vue.JS app not working on IIS (url rewriting?)

I saw lot of posts about vue.js on IIS but my project is not working.
Vue.JS Application with router :
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Applications',
name: 'Applications',
component: Applications
}
]
const router = new VueRouter({
mode: 'history',
routes
})
Web server :
IIS 10
Url Rewrite 2 :
Url rewrite configuration import from web.config
Url rewrite is working (tried this : https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-failed-request-tracing-to-trace-rewrite-rules)
web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Result :
Blank page
Inspector console errors (missing my application node into url)
Failed to load resource: the server responded with a status of 404 (Not Found)
GET http://localhost/css/app.63040a86.css net::ERR_ABORTED 404 (Not Found)
I already tried all things found but it's not working, can you help me please ?

Quasar with Asp.NET Core WebApi IIS publish 403 error

In development stage, the quasar project can be hosted and run under the IIS virtal application. When published, copied files from dist folder to iis root directory, the index page display normally, but there is an error 403 when using webapi url to make a httppost request. I have used IIS UrlRewrite component. It seemed that the issue related with the webapi request conflict with the urlrewrite.
the web.config file contains url rewrite rules
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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="index.html" />
</rule>
</rules>
</rewrite>
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
</httpErrors>
</system.webServer>
</configuration>
the startup.cs file contains controller route pattern
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseSpaStaticFiles();
app.UseAuthorization()
.UseCors("AllowAll");
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapControllerRoute(
name: "default",
pattern: "api/{controller=Home}/{action=Index}/{id?}");
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseVueCli(npmScript: "serve", forceKill: true);
}
});
}
IIS 403 error
When there is webapi request, the error happens...
http://localhost/webdemo2/api/wf/QueryProcessRoles
There is an article is useful to deploy quasar project to IIS, but the error 403 still exist. Could anyone find a solution here? Thanks
https://forum.quasar-framework.org/topic/3004/deploy-quasar-application-in-iis
There are many reasons for 403 error, you can try below methods to slove the question:
1.The 403 error page will appear if the right permissions are not given to the folder. you need to assign IIS_IUSRS security permissions to your assigned web folder.
Right click on the folder you assigned for web access in IIS, Choose "Properties" and then go to "Security" tab. In the top box, "Group or user names", open "Edit…", You will most likely cannot fine IIS_IUSRS in the list; open, "Add..", In the box at the very bottom, "Enter the object names to select (examples):" enter IIS_IUSRS, Click OK and make sure in the Permissions window, you have allowed, Read & execute, List folder contents and Read
2.Please check if you set the default document.

Vue 2 router issue when deployed with IIS server

I'm trying to deploy a vuejs application integrated with vue router(history mode on) on a IIS server. I'm having an issue with router i.e when I refresh the page anywhere else other than the main page (/), it will return with 404 NOT FOUND. I followed some resources found online but can't seem to fix the issue.
I followed the steps mentioned in the vue router documentation by installing IIS Url Rewrite then adding this configuration in web.config in the root directory.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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>
But it still does not work.
In my IIS server, I created a folder called ${appName} and pasted the content of the dist folder inside it after npm run build on the vue app
This is a sample of my router file
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: () => import('#/views/pages/Home.vue'),
meta: {
auth: false,
layout: layouts.navLeft,
searchable: false,
nav: false,
icon: 'icon-home',
roles: [ ROLES.SUPERADMIN, ROLES.ADMIN ]
}
},
This is the server.js file on the vue app.
const express = require('express');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + '/dist/'));
app.get(/.*/, function(req, res) {
res.sendfile(__dirname + 'dist/index.html');
});
app.listen(port);
console.log('server started');

Vuejs deploy to IIS Default Web Site application

I need help deploying a VueJS application to the IIS Default Web Site as an additional application.
I can add the built Vue site as its own IIS Web Site on a new port(other than port 80). I change the vue.config.js publicPath property to './' and point the new site to the built 'dist' folder. THIS WORKS FINE
What i cannot get working is when i try to add a new 'Application' under the Default Web Site. This allows you to use the default port(80) and just append the 'Alias' name to the URL. ex - localhost/myvuesite
Ive gotten this to work fine in the past with other company ASP.NET websites but i cannot get this working with Vue. When i try to navigate to my newly created site, localhost/myvuesite, i just get a blank page with nothing to display. When i inspect the chrome source it appears that the site downloaded the .js and .css and index.html files but something is not working correctly.
web.config in 'dist' directory:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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>
vue.config.js:
module.exports = {
publicPath: './',
productionSourceMap: false
};
File structure:
myvuesite
- css
- img
- js
- favicon.ico
- index.html
- web.config

Nuxt.js routes returning 404 in IIS with IISNODE

Just trying to host the nuxt.js and express.js demo in iis with iisnode.
I am getting 404's for the nuxt page routes, but the express api routes are working fine.
All that nuxt does is all express to handle its routes. Not sure why this is not working.
I have set up my web.config with iisnode handler and I have also included the url rewrite config to route everything to the server.prod.js
'use strict';
var Nuxt = require('nuxt');
var app = require('express')();
var host = process.env.HOST || '127.0.0.1';
var port = process.env.PORT || 3000;
app.set('port', port);
// Import API Routes
app.use('/api', require('./api/index'));
// Import and Set Nuxt.js options
var config = require('./nuxt.config.js');
config.dev = !(process.env.NODE_ENV === 'production');
// Init Nuxt.js
var nuxt = new Nuxt(config);
app.use(nuxt.render);
// Build only in dev mode
if (config.dev) {
nuxt.build().catch(function (error) {
console.error(error); // eslint-disable-line no-console
process.exit(1);
});
}
// Listen the server
app.listen(port, host);
console.log('Server listening on ' + host + ':' + port); // eslint-disable-line no-console
<configuration>
<system.webServer>
<handlers><add name="iisnode" path="server.prod.js" verb="*" modules="iisnode" /></handlers>
<rewrite>
<rules>
<rule name="myapp">
<match url="/*" />
<action type="Rewrite" url="server.prod.js" />
</rule>
<!-- Don't interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^app.js\/debug[\/]?" />
</rule>
</rules>
</rewrite>
<directoryBrowse enabled="true" />
<iisnode devErrorsEnabled="true" debuggingEnabled="true" loggingEnabled="true" nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />
<!-- exclude node_modules directory and subdirectories from serving
by IIS since these are implementation details of node.js applications -->
<security>
<requestFiltering>
<hiddenSegments>
<add segment="node_modules" />
</hiddenSegments>
</requestFiltering>
</security>
</system.webServer>
</configuration>
IIS Node uses named pipes, therefore the server render api calls on locahost tcp port 80 were failing...
The server-side needs a full url to work.