I recently received a sample Vue app created using vue-cli, which generates static files when the npm run build command is executed.
Normally, these files are served by a server from node.js. However, I am curious to know if it's possible to serve them from my ASP.NET MVC application instead.
The reason for my inquiry is that I need to demonstrate how Vue.js functions as we contemplate transitioning away from Knockout.js.
Although it took some time to find a clear solution, I wanted to share this important information about client-side routing in ASP.NET applications. Using UseStaticFiles() is a common practice for single page applications (SPAs), but issues arise when the page is refreshed or accessed directly via URL.
To enable client-side routing, it's crucial to set up a fallback path that redirects any unresolved server-side routes to the client application.
If your Vue app (or any SPA) is placed in a root directory named wwwroot, follow these instructions:
In your Startup.cs file, within the Configure() method, make sure to include UseDefaultFiles() and UseStaticFiles() to ensure that the index.html file is located and served correctly.
The key to supporting client-side routing lies in adding a fallback endpoint to UseEndpoints(). This will redirect any unhandled routes from the server to the client app for proper routing.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseHttpsRedirection();
// Make sure to call UseDefaultFiles() before UseStaticFiles()
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
// Fallback route handling for client-side routing
endpoints.MapFallbackToFile("/index.html");
});
}
For more detailed information, you can refer to this resource:
I have discovered a solution to the issue at hand:
To solve this problem, we can utilize any sample Vue application that has been created with the vue-cli. The key is to serve static files via an HTTP server, a task which can be accomplished in .NET MVC.
Begin by creating your Vue application within your project. I recommend placing it at the root level of your .NET MVC project.
Add a vue.config.js file and set the publicPath property to specify the directory where all static files will be generated.
Create a controller to handle the serving of the static files generated by the Vue application.
It is advisable to give your controller the same name as the folder specified in the publicPath for organizational purposes.
For example:
vue.config.js
module.export = {
publicPath:'~/Dist'
}
public class DistController : Controller {
}
Ensure that for each route defined in vue-router, there is a corresponding Action method with the same name as the route path. Each method should return the static HTML or CSHTML file that was generated.
Be sure to use a custom path name for your main component (avoid using '/').
For instance:
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/login', component: Login },
{ path: '/about', component: About }
]
})
public class DistController : Controller {
public ActionResult home()
{
return new FilePathResult("~/Html/index.html", "text/html");
}
public ActionResult about()
{
return new FilePathResult("~/Html/index.html", "text/html");
}
public ActionResult login()
{
return new FilePathResult("~/Html/index.html", "text/html");
}
To build your project for production, run the following command:
npm run build
This will generate a folder containing all the necessary static files.
I had previously asked a question regarding the use of the Vide plugin for playing background videos on my website, which can be found here. However, I am now encountering an error that is puzzling me: https://i.stack.imgur.com/UDFuU.png I am unsure abo ...
I'm currently attempting to loop through an array of objects and display a random quote from the data I have. However, my code seems to be returning undefined. Any thoughts on why this might be happening? Here's what my code looks like so far: ...
Here is what I have accomplished so far: JSFIDDLE My current goal is to: add the class "invalid" to the <select> if it was not selected in its respective row remove the "invalid" class if all 3 selects in the row are selected automatically submit ...
Within my code, I have a BindingList<> containing a particular class that is linked to the DataSource property of a BindingSource. This BindingSource is then connected to the DataSource property of a DataGridView. 1. From what I gather, whenever an ...
When it comes to navigating back on previous pages, the traditional back button is typically used instead of relying solely on the navigation bar. However, I am currently looking to disable this feature specifically when the next previous route in line is ...
I am facing an issue where I have a factory with 2 controllers. The first controller returns an entire array, while the second controller is supposed to return only one item based on a specific filtering expression. I need to extract the last two parameter ...
Currently, I am working on developing an electron application along with a module that it uses. My main concern is ensuring that this module gets updated on the end user's machine whenever there is a new version available, even if they do not have NPM ...
Here is the initial question that needs to be addressed. I am currently developing an API that links a front-end application (built using node, express, and Ajax) with a Python swagger API. The issue I am facing is that although I can successfully send da ...
When I fetch the expiry date time in UTC from the Authentication API along with a token, I use the npm jwt-decode package to extract the information. private setToken(value: string) { this._token = value; var decoded = jwt_decode(value); this._ ...
Can I keep the options visible when a user selects an item in the 'select' dropdown? I want to add more options to the 'select' when the user clicks on the 'op2' item, without closing the list of options. <select> <o ...
I have a div with the following structure: <article id="#pippo">blablabla</article> which I have hidden using jQuery $('article').hide(); Now, I want to create a link menu that displays a specific article id when it's clicked ...
I have successfully converted a table into an XML string which appears as follows: <NewDataSet>\r\n <officelist>\r\n <OfficeID>2176</OfficeID>\r\n <Office>My Office </Office>\r&bsol ...
I am facing an issue with a text input element that is being dynamically changed by Javascript based on the values of other input elements. How can I configure Selenium to wait for this change to occur? I have tried two different approaches: var wait3 = ...
Help needed for a beginner question let myOptions: { chart: { height: 350, type: 'bar' }, colors: ["#800000"] }; let vueExample = new Vue({ el: '#example', components: { apexchart: VueApexCh ...
I encountered an issue while trying to install Vue Router using the command "npm install vue-router". The error message displayed is as follows: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: ...
function displayMessage() { var isConfirmed = confirm("Do you want to proceed?"); if (isConfirmed) { window.location = "./proceed"; } }; function checkIfEmpty(){ console.log("checkIfEmpty"); }; @CHARSET "ISO-8859-1"; form { margin:0 auto; width:300px ...
req.body seems to be coming up empty for me. I've tried adding content-type headers as json, but it's not making a difference. Can anyone point me in the right direction? Thank you. UPDATE: Just to clarify, my Angular frontend is successfully hi ...
As I work on developing a point-and-click test game, I've made significant progress by conducting thorough research and finding answers to various inquiries on Stack Overflow. However, I have encountered an issue that I can't seem to find any exi ...
Here is a snippet of JSON data: { "1": [ { "id": 11, "seniorcitizen_id": 67201379, "courier_id": 33, "totalPrice": 500, "delivery_date": "June 14, 2018, 12:00 am", "packed": 0, "parcel_id": 1, "medicine_id": 1, "qty": 3, "owner": { "id": 67201379, "barang ...
I have this code written in Typescript and I need to convert it to JavaScript const Home = (props) => { return ( <div> {props.name ? 'Hi ' + props.name : 'You are not logged in'} </div> ); }; How can I re ...