I have used this template for developing my application which is a Vue app with an Electron builder. Now I have a problem:
I need to build production and deploy my project once as an electron package and another time for a web application hosted on a web server. I do not want to separate it into two repositories as well. Do anybody have any suggestions?
I have tried using dist folder as root folder of website and I have added a web.config file as follow to the root but I am getting an error.
web.config file content:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Vue" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^/api/.*" negate="true" />
<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>
the error on IIS:
Yes, you need to install url rewrite module on IIS. Otherwise, IIS won't understand what <rewrite> <rules> <rule name="Vue" stopProcessing="true"> means in web.config.
Download it from here
Related
I was successfully able to get a Vue app working in iis at the root level with a port(8181),
but I need to get it working under the Default Web Site in iis (port 80)
To test this I started a brand new website with the Vs19 template. ( should have used vue scaffolding, will try that tomorrow, done, reproduces the same error)
Got it up and running under npm run serve.
Ran npm run build
Went to IIS, added a new app under Default Web Site" called VuejsApp2 pointing to the dist folder under the main folder.
Copied the default web.config for a vue app:
<?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>
<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>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
Went to the Dist folder and set security user "Everyone" and gave it full access to the folder (yes I know, it's a test)
Made sure sure URl re-write was installed (required to get app working at base) by looking under installed apps
Pointed the app in IIS to the same App pool that worked for the other app (integrated, no
When I navigate to the app in chrome at http://localhost/VuejsApp2
I get a 503 service is not available error
I figure it's something basic, but all the tutorials I've found to host vue in iis, this is all that's listed to do, I found a SO question on the same topic, but it had no answers...
Other SO question with no answer
I read that 503 in IIS meant that the app pool was stopped due to multiple crashes, but the app pool shows started not stopped.
UPDATE:
I added this to the web.config for my basic empty vue app and it still gets 503 error
<?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>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
On my original app, I did it and I"m getting a different unrelated error. so maybe it helped?
I would check your rewrite rule, I think you're getting an error due to too many redirects.
You're sending anything intended to be picked up by VueRouter to the root of your site, rather than to your index.html. Change your rewrite rule to this
<action type="Rewrite" url="/index.html" />
I think that might help solve your problem
I have the following setup: on IIS
A Vue.js app # https://localhost/some-app/
I need to be able to download files from an inner folder:
https://localhost/some-app/pdf-reports/test.pdf
With vue.js history mode enabled and configured,
why do requests for inner folders or files get redirected to the home page?
<?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>
So am using a vueJS Example as a demo for learning purposes which uses a requirejs-vue as a component loader.
when i run the server on Live-Server extension of VS-code (a simple http server), it run correctly with no problems.
However, when i run this example on IIS server (version 8.5) on windows 8.1, it through 404 Error app.vue does not exist.
Failed to load resource: the server responded with a status of 404 (Not Found)
and in the Network devtool, i can see that every module is loaded correctly, except for *.vue files,
VueJS Example :
https://plnkr.co/edit/Y2cEa3?preview
Web Config for IIS that am using:
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
<?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>
PS: i have also run an other example that uses http-vue-loader instead of requirejs-vue and IIS still throwing the same error.
We need to set mimeType for the “.vue” extension file to use httpvueloader/requiresjs_vue.
In addition, we could manually add it to a Web.Config file, which can be recognized by IIS.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".vue" mimeType="application/javascript"/>
</staticContent>
</system.webServer>
</configuration>
Feel free to let me know if the problem still exists.
I need to redirect a cname to a port.
I have Teamcity running on my server (at port 8111), I want to make teamcity.mydomain.com be redirected to mydomain.com:8111. So I will just need to type teamcity.mydomain.com to get into teamcity server.
I have read that reverse proxy from apache would do it for me, but so far I could not get it setup correctly.
ps.: it works when I do mydomain.com:8111.
I think something like this should work:
ProxyPass / http://example.org:8111/
ProxyPassReverse / http://example.org:8111/
ProxyPreserveHost On
Make sure mod_proxy is enabled to.
If you are running on Windows, and have IIS installed you can do this with IIS by installing the Application Request Routing module, and the Rewrite module. Once you do that, here is are the rewrite rules for your web.config. This rewrites all request for http://example.com to http://example.com:8080.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="CIReverseProxyInboundRule" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="http://example.com:8080/{R:1}" />
<conditions logicalGrouping="MatchAny">
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
</rule>
</rules>
<outboundRules>
<rule name="CIReverseProxyOutboundRule" preCondition="ResponseIsHtml1">
<match filterByTags="A, Form, Img" pattern="^http(s)?://example.com:8080/(.*)" />
<action type="Rewrite" value="http{R:1}://example.com/{R:2}" />
</rule>
<preConditions>
<preCondition name="ResponseIsHtml1">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
I have got this code for detection of mobile device.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name="MobDedect" stopProcessing="true">
<match url=".*" ignoreCase="false" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_USER_AGENT}" pattern="android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino" />
<add input="{HTTP_USER_AGENT}" pattern="^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)" />
</conditions>
<action type="Rewrite" url="http://detectmobilebrowser.com/mobile" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
but in IIS 6 I don't where to write this rule.
There is no built-in URL rewriting mechanism in IIS 6. You have to install an ISAPI filter like this one: Ionic's Isapi Rewrite Filter
You can install URL Rewrite option in IIS 6.0.
http://www.web-site-scripts.com/knowledge-base/article/AA-00461/0/Installation-of-URL-Rewriting-module-IIRF-for-IIS6-IIS7.html
there are all steps given for process IIS 6.0 URL Rewrite Option