1

I have a Nuxt app running successfully on my local server and all API requests are successfully running from the same server (using the serverMiddleware property in nuxt.config.js). When I run a yarn generate, the path to the API server is lost and no data is loaded. Below are a few screenshots.

Loads data successfully from the API.

1

Unable to find API

2

Here is an example of an api call in project_dir api/index.js file

const express = require("express");
const passport = require("passport");
const allRoutes = require("../api/routes/routes");
const guestRoutes = require("../api/routes/guest");
const fileUpload = require("express-fileupload");
const path = require("path");

// Create express instance
const app = express();
// Init body-parser options (inbuilt with express)
app.use(express.json());
app.use(fileUpload());
app.use(express.urlencoded({ extended: false }));

app.use(express.static(path.join(__dirname, "../", "dist")));

/**
 * -------------- PASSPORT AUTHENTICATION ----------------
 */

// Need to require the entire Passport config module so index.js knows about it
require("./config/passport-jwt");

// Initialize Passport
app.use(passport.initialize());

/**
 * -------------- ROUTES ----------------
 */

// Imports all of the routes from ./routes/index.js
app.use(guestRoutes);
app.use(passport.authenticate("jwt", { session: false }), allRoutes);

console.log("express");
console.log(path.join(__dirname, "../", "dist"));


app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../", "dist", "index.html"));
});

// Export express app
module.exports = app;

I don't know why I'm not able to get data from the API routes which I'm running on the same server.

kissu
  • 40,416
  • 14
  • 65
  • 133
Divine
  • 13
  • 4

2 Answers2

0

Here is an in-depth answer on how to run an Express server alongside Nuxt: https://stackoverflow.com/a/72102209/8816585

First thing to know, is that you cannot have a Node.js server with yarn generate because it's using target: 'static' and as you can guess, when something is static, it doesn't need a Node.js server to be served to the end-user (only the html + css + js static files are hosted on a CDN or alike).
This mode is meant to host the code on Netlify, Vercel or alike, with no Node.js server available there.

Why is it working locally? Because you do have a Webpack dev server running (with a Node.js server so) for debugging purposes like HMR etc...


TDLR: this is normal (works as intended so far). More info on the given link above on how to make it work.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • I used target static because I want to bundle it into a Desktop application. – Divine May 21 '22 at 21:07
  • @Divine you cannot have a running Node.js server in static mode. Not sure how it's related to a desktop app tho. – kissu May 21 '22 at 21:46
  • I'm using the nuxtron package to build the project for Desktop usage. When bundling the project, it runs npm run generate by default. That's why I want to know if there's a way I can access the API's in static mode. – Divine May 23 '22 at 11:45
  • @Divine my answer and previous comment are still valid. – kissu May 23 '22 at 12:25
0

After much research and debugging I came up with a new idea. Instead of running npm run start or yarn start containing script "nuxt start" inside the package.json file. I added a new script with the name "express-start": "cross-env NODE_ENV=production node api/index.js". Which runs the express server and nuxt static files. I'm currently creating a template to make it easier for those who'll face this challenge.

Link to a boilerplate I created after solving the issue. ExpressJs & NuxtJs Boilerplate

Divine
  • 13
  • 4