Express Vue Production Problem

I've been attempting to implement SSR in my Vue app, and to achieve this I've incorporated the vue-plugin-ssr extension. To run it with express, I created a new file named server.mjs containing the following code:

import express from "express";
import { createServer as createViteServer } from "vite";
import { renderPage } from "vite-plugin-ssr";

async function createServer() {
  const app = express();

  // Setting up Vite server in middleware mode and specifying the app type as 'custom' to disable Vite's HTML serving logic
  const vite = await createViteServer({
    server: { middlewareMode: true },
    appType: "custom",
  });

  // Using Vite's connect instance as middleware
  app.use(vite.middlewares);

  app.get("*", async (req, res) => {
    // Utilizing `renderPage()` for serverless environments such as Cloudflare Workers and Vercel
    const { httpResponse } = await renderPage({ url: req.url });
    res.send(httpResponse.body);
  });

  app.listen(3000);
}

createServer();

Development seems to be working fine when I run node server.mjs. However, there is no index.html file in either the client or server folder. How can I get this set up for production? Currently, I have configured the nginx folder path to point to path/dist/client, but am I missing something else?

By the way, on production I'm receiving a "403 Forbidden" response.

Answer №1

To successfully compile the client and ssr build process, follow the steps outlined in Vite's documentation available here. After completing this, ensure to:

Restructure the creation and utilization of the vite dev server within dev-specific conditional statements, then incorporate static file serving middlewares for handling files from dist/client

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

Customize your JQuery/HTML5 Slider to accept user input

Currently, I am developing a time tracking mobile application in MVC4, which includes the use of a slider input type. <input type="range" name="time_verdi" id="slider" value="7.5" min="0.0" max="24" step="0.5" data-highlight="true"/> When using thi ...

The error message from @nuxtjs/sitemap indicates that it is unable to locate the 'nitropack' package

I have a nuxtjs v2 webapp and recently integrated the @nuxtjs/sitemap module. However, I encountered an error whenever I tried to run npm run dev, build, or generate: Cannot find package 'nitropack' imported from D:\Web Development\...& ...

MySQL Node error - Error: Unable to add Quit after calling quit command

I am in the process of developing a promise-based API. The functionality works smoothly when handling one request at a time. However, I encounter an error if two or more requests reach the server within a second of each other, displaying the following mess ...

Effective ways to manage extensive forms in Angular 2

I have a complex form in my application. What is the most effective way to collect data from this form and transmit it to the API using Angular 5? ...

"Customizing FusionCharts: A step-by-step guide to changing the background color

Is there a way to modify the background color of fusionchart from white to black? Additionally, how can I change the font color in the chart? ...

Tips for troubleshooting TypeScript Express application in Visual Studio Code

Recently, I attempted to troubleshoot the TypeScript Express App located at https://github.com/schul-cloud/node-notification-service/ using Visual Studio Code. Within the launch.json file, I included the following configuration: { "name": "notifi ...

Express get requests are failing to handle query strings

Whenever I try to extract the year and month from the URL like this: http://localhost:3000/api/posts/2018/4, the code doesn't seem to work properly. Instead, it returns an error saying: Cannot GET /api/posts/2018/4 Here's the JavaScript code I&a ...

Convert a string with the characters '"' retrieved from a MySQL database into JSON

After creating a JSON object and storing it in MySQL, I encountered an issue when trying to retrieve and parse it. When I stringify the JSON object, the properties are being enclosed in double quotes causing issues when parsing the retrieved string. Below ...

Instead of returning a JSON result, the MVC controller method called from AngularJS is returning the view HTML

Within the HomeController, I have the following method, [HttpGet] public ActionResult GetStudents() { Student std1 = new Student(); List<Student> stdlst = new List<Student>(); std1.Id = 1; ...

Using Typescript with d3 Library in Power BI

Creating d3.axis() or any other d3 object in typescript for a Power BI custom visual and ensuring it displays on the screen - how can this be achieved? ...

Comparing onScopeDispose with scope.cleanups

While reviewing some source code to ensure proper cleanup of my event bus on component destruction, I came across the use of scope.cleanups (found in https://github.com/vueuse/vueuse/blob/main/packages/core/useEventBus/index.ts): const scope = getCurrentSc ...

Creating dynamic cubes in Magento with interact.js within a .phtml template

I utilized the interact.js library to create this code snippet, which functions perfectly on Chrome, Firefox, and w3schools "Try it Yourself" platform (unfortunately not compatible with Edge and IE for unknown reasons). However, when I include this code wi ...

The value of the comment box with the ID $(CommentBoxId) is not being captured

When a user enters data in the comment box and clicks the corresponding submit button, I am successfully passing id, CompanyId, WorkId, and CommentBoxId to the code behind to update the record. However, I am encountering an issue as I also want to pass the ...

The Ajax Form disappears from the page

After racking my brain for a while, I've come to the conclusion that it's time to seek some assistance. I have work tomorrow and I don't want to spend all night on this. The issue lies in my form which is located inside a modal, here is my ...

Is there a way to automatically update the URL to include $_GET['data'] (media.php?data=123) when a selection is made from a dropdown list?

I'm currently working on a project that involves a website in PHP and a MySQL database. I have successfully linked the two together, and now I have a combobox filled with data from the database. Below is my script for handling the selection: <scr ...

What is the best way to utilize the history prop in conjunction with other props?

I am currently using react-router-dom along with react. My goal is to include additional props along with the history prop import React from 'react'; function MyComponent({ history }) { function redirect() { history.push('/path&ap ...

Angularjs - How come I am able to modify an object but not the list (ng-repeat) from a separate view?

After updating the customers object in the console, I noticed that the list (ng-repeat) is not reflecting the changes. What should I do? Interestingly, it works fine when I implement this function and view2.htm's HTML inside page.htm. HTML "page.htm" ...

Retrieve data from backend table only once within the bootstrap modal

How can I retrieve values from a table once a modal is displayed with a form? I am currently unable to access the values from the table behind the modal. Are there any specific rules to follow? What mistake am I making? I would like to extract the values ...

Utilize an AJAX call to fetch an array and incorporate it within your JavaScript code

Currently, I am in the process of building a live update chart feature. To access the necessary data, I created a separate file which contains the required information. Through AJAX, I sent a request from my main page to retrieve an Array and incorporate i ...

Any suggestions on resolving the "script timeout" issue while running a script using Python's SeleniumBase Library?

Recently starting to use Python, I am currently using Python's seleniumbase library to scrape a website and need to periodically run this fetch script. While experimenting, I encountered a script timeout error when the response time exceeded around 95 ...