Cannot GET from Express server in production, 404 (Not Found)

Explanation of the problem

When attempting to deploy a Nuxt app with an Express server on platforms like Heroku and Netlify, a recurring issue arises where the deployed application returns a 404 error. This error is consistent across different deployment environments, suggesting a potential misconfiguration in the Nuxt/Express setup. Even a test app created with the default scaffolding experiences the same problem.

The issue manifests itself when trying to perform a GET request to a test endpoint from the client-side code. Locally, the request works fine and logs the expected response to the console. However, when deployed to Heroku, for example, the console displays a “404 (Not Found)” error. The following code snippets showcase the client-side button click event and the server-side test endpoint:

<template>
  <section class="container">
    <button @click="logTest">Log Test</button>
  </section>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    logTest() {
      return axios.get('/test').then((res) => {
        console.log('got data:', res.data)
      })
    }
  }
}
</script>

// server/index.js
app.get('/test', (req, res) => {
  res.status(200).send('reached test endpoint')
})

Despite the consistent local functionality, the deployed application fails to locate the “/test” endpoint, resulting in a 404 error. This issue persists even when following deployment instructions provided by Heroku. Assistance is sought to resolve this matter, as the default scaffolding and setup remain unchanged, making it difficult to determine the cause of the error. Any help or insights into this problem would be greatly appreciated, as it has impeded progress for several days.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Cannot GET from Express server in production, 404 (Not Found)

To resolve the issue of a 404 error when accessing the “/test” endpoint in a deployed Nuxt app with an Express server, the following steps can be taken:

1. Check the Deployment Configuration: Verify that the deployment process is correctly set up and that all necessary dependencies and build steps are included. Double-check any environment variables or configuration files that might affect the server-side routing.
2. Configure Server to Handle All Routes: Ensure that the server is configured to handle all routes and redirect them to the appropriate Nuxt page. This can be achieved by adding a wildcard route that redirects all requests to the Nuxt app’s entry point. Modify the server configuration code in “server/index.js” to include the following:

// server/index.js
const { resolve } = require('path');
const express = require('express');
const app = express();

// ...existing code...

// Add this route to handle all requests
app.get('*', (req, res) => {
  const indexPath = resolve(__dirname, '../dist/index.html');
  res.sendFile(indexPath);
});

// ...existing code...

3. Build and Deploy the Application: After making the necessary changes, rebuild the Nuxt application and redeploy it to the chosen hosting platform. This typically involves running the build command (npm run build) and deploying the resulting build files to the appropriate server or hosting service.

By following these steps, the Nuxt app with the Express server should correctly handle the routes, allowing access to the “/test” endpoint without encountering a 404 error during deployment.

npm ERR! code ECONNREFUSED
npm ERR! errno ECONNREFUSED
npm ERR! FetchError: request to https://registry.npmjs.org/create-nuxt-app failed, reason: connect ECONNREFUSED 127.0.0.1:443

npm config set registry https://registry.npmjs.org/

npx create-nuxt-app my-app --registry=https://registry.npm.taobao.org

Error: Cannot find module '.../create-nuxt-app/bin/create-nuxt-app.js'

EACCES: permission denied, mkdir '/usr/local/lib/node_modules/create-nuxt-app'

npm config set prefix ~/.npm-global

npx create-nuxt-app my-app

npx create-nuxt-app my-app
# Follow the interactive prompts to customize the project configuration

npx create-nuxt-app my-app
# Select the desired modules like Axios and Jest during the project setup