Creating a dynamic webpage using the MVC design pattern within a Docker container

I am facing a challenge with my dotnet core application that has authorization. Due to company policy restrictions, Bearer tokens cannot be stored on the front-end. To work around this, I want to utilize an MVC Controller. However, the application is built as a SPA using Vue.js, which generates an index.cshtml file. While this setup works fine locally in Kestrel, deploying it to a Docker container presents a problem. It seems like there might be a conflict between how MVC expects files to be located and how Docker handles them.

I have attempted different approaches to locate the file within the pod. The application runs in the /app directory, and the SPA was initially deployed to /app/wwwroot. Despite my efforts, I couldn't get the MVC Controller to read from that specific folder. Even changing the vue.js webpack configuration to output files under /app/View/[ControllerName] did not resolve the issue.

Dockerfile:

FROM microsoft/dotnet:2.2-aspnetcore-runtime

EXPOSE 80

# Create app directory
WORKDIR /app

# Copy files from the artifact staging folder on agent
COPY <ProjectName>/out .

RUN apt-get update -y && apt-get install ca-certificates -y && rm -rf /var/lib/apt/lists/*
ADD certificate.crt
ADD certificate2.crt
ADD certificate3.crt
RUN update-ca-certificates

ENTRYPOINT ["dotnet", "<ProjectName>.dll"]

Expected outcome: successful loading of the SPA. Actual results: encountering various MVC errors related to the inability to find the index.cshtml file in different directories. Despite my attempts to guide it to the right location (e.g., pointing to vue.js under /app/wwwroot or making sure the SPA is generated under /Views/[ControllerName]), the build process seems flawed, resulting in unexpected behaviors such as generating a non-existent HomeController in one instance.

Answer №1

After some experimentation, I decided to simply take the generated file and use it as the response.

public ActionResult Index()
{
    try
    {
        var fileStream = new FileStream("/app/wwwroot/index.html", FileMode.Open);
        return File(fileStream, "text/html; charset=utf-8");
    }
    catch (Exception ex)
    {
        _logger.LogError($"Failed to open /app/wwwroot/index.html", ex);
    }  

    return StatusCode(500);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Defer the rendering of Vue.js pages until the data request is completed

I am currently working on a page that retrieves data from the server using axios. My goal is to wait for the axios request to complete before rendering the page content. The reason behind this approach is that I already have a prerendered version of the ...

Issue encountered with installing serve while using Docker npm

I'm new to docker and I'm currently working on adding the frontend (developed with create-react-app) into a docker container. After following a tutorial, here is what my Dockerfile looks like: FROM node:7.8.0 ENV NPM_CONFIG_LOGLEVEL warn RUN n ...

Using HTML to load an image is not possible, as it can only be done using CSS

I am currently dealing with a CSS issue in my project. Here is the code snippet from my stylesheet: .Img{ background: url('../assets/Trump.png'); } Now, let's take a look at the corresponding HTML code: <div class="Img"> However, ...

Utilizing Vue.js with Firestore: Retrieve information from Firestore without rendering any data on the screen

When attempting to display my data from Firestore, I encountered an issue where the data was retrieved successfully when hovering over the <td> tag but not actually displayed. Here is my file for fetching data from Firestore: <template> & ...

Navigate to an element with a specific ID using JavaScript

How can I implement scrolling to an element on a webpage using pure javascript in VueJS with Vuetify framework? I want to achieve the same functionality as <a href="#link"></a> but without using jQuery. My navigation structure is as follows: ...

ag grid - issue with icons not appearing correctly

<script> import {AgGridVue} from "ag-grid-vue"; import 'ag-grid-enterprise'; import 'ag-grid-community/dist/styles/ag-grid.scss'; import "ag-grid-community/dist/styles/ag-grid.css"; import "ag-grid-community/dist/styles/ag-theme-a ...

Looping through an array of objects in VueJS can become a bit tricky when dealing with objects whose properties are dynamic. How can I efficiently

I am looking to create a matrix display from an array of objects, but the properties of the objects may change over time. Here is an example of the data: [ { location: "Japan", webhookStatus: "Up", authenticationStatus: &q ...

Discovering the magic of Vue SCRIPT SETUP

I have successfully implemented the simple-vue-camera library and it works well, but I would like to utilize it with script setup. However, I am unable to access the snapshot method of the camera... The issue seems to be in the 'const cameraComponent ...

implement a filtering feature in vue with vuetify using a button

I am attempting to sort the data when a button is clicked. While I have successfully filtered the data in the console log, I am unsure of how to return that filtered data. Here is the approach I have taken: <script> export default { name: &ap ...

Should you include the dollar sign in a Vue HTML variable or not?

I’m a bit confused about whether or not I should include $ when using a Vue HTML variable: new Vue({ data: { a: "myData" } }); Do I need to use: <h1>My value is {{ a }}</h1> or <h1>My value is {{ $a }}</h1> What ...

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

How to trigger an event with multiple parameters up several levels using Vue 3?

Important Note: While this question may seem repetitive to some, I have not been able to find a suitable solution for Vue 3 that involves passing events with parameters through multiple levels. Please correct me if I am mistaken. A Clarification: Despite ...

The vue-pdf is having trouble loading all pages due to an "undefined property" issue

I am currently utilizing the following technologies: Vue.js, vue-route, Vuetify, Firebase (with a database) and vue-pdf The issue I am facing involves attempting to load all pdf pages using "vue-pdf" plugin. However, when trying to read the pdf, I encoun ...

The results of running 'npm run dev' and 'npm run build prod' are different from each other

Currently, I am in the process of developing a progressive web app using Vue.js. During development, I utilize the command npm run dev to initiate the local server that serves the files over at http://localhost:8080/. When it comes time to build for produ ...

What is the method in Vue.js for receiving notifications when a property's value is accessed?

Currently, I am working on a project using Vue.js and facing a challenge with dependencies. In my data object, there is a boolean property that I need to track whenever it is accessed or used so that I can make changes to other properties before the boolea ...

Tips on personalizing the FirebaseUI- Web theme

Can someone help me find a way to customize the logo and colors in this code snippet? I've only come across solutions for Android so far. if (process.browser) { const firebaseui = require('firebaseui') console.log(firebaseui) ...

Removing items in vue.js

I'm currently in the process of learning Vue.js. This is my first attempt at creating a small to-do application, and I am encountering issues with deleting each individual task upon clicking. Despite watching multiple YouTube tutorials, I have not bee ...

What is the best way to incorporate a third-party element into Vue using a script tag?

I am in the process of developing a website and I would like to include a widget that links to a podcast on BuzzSprout. Initially, I created the site using HTML to test out different designs, but now I am looking to transition it to VueJS. In my HTML vers ...

Setting Start and End Dates in Bootstrap Vue Datepicker to Ensure End Date is After Start Date

My Vue.js form includes two BootstrapVue datepickers for holiday management. Users can define the start date and end date of their holiday, with the condition that the end date must be equal to or greater than the start date. Here is my current implementat ...

Using Typescript with Vue.js: Defining string array type for @Prop

How can I properly set the type attribute of the @Prop decorator to be Array<string>? Is it feasible? I can only seem to set it as Array without including string as shown below: <script lang="ts"> import { Component, Prop, Vue } from ...