Create-nuxt-app: Cannot GET from Express server in production, 404 (Not Found)

[mikeglopez]

Hi,

I'm attempting to deploy a Nuxt app with an express server. I have tried deploying to both Heroku and Netlify and have gotten the same error on both, so I'm assuming there's an error somewhere in my Nuxt/Express configuration. I created a new test app to see if I could resolve the issue and even that is giving me issues.

Everything works fine locally, but when deployed, returns a 404 error.

To Reproduce

npx create-nuxt-app testapp
? Project name testapp
? Project description My smashing Nuxt.js project
? Author name Mike
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework Express
? Choose Nuxt.js modules Axios
? Choose linting tools None
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

cd testapp and npm run dev

I added a simple button to log the result of GETting from my test endpoint to pages/index.vue

<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>

and added the following test endpoint in server/index.js right above app.use(nuxt.render)

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

This works fine locally, when I click the button, I see 'got data: reached test endpoint' in my console. Once deployed to heroku, in the console, I get

GET https://TESTAPPURL.herokuapp.com/test 404 (Not Found)
Error: Request failed with status code 404
    at t.exports (f31d605....js:2)
    at t.exports (f31d605....js:2)
    at XMLHttpRequest._.onreadystatechange (f31d605....js:2)

To deploy to heroku, I have followed the instructions here

Thanks in advance, I'd appreciate any help as I've been stuck on this for several days now. Not sure if this is a bug or just something wrong with my configuration, just doesn't make sense as I haven't changed any setup from the default scaffolding and it works locally.

[climba03003]

I am not sure if I am correct or not. But in my experience.

When you are in local environment, the you are starting the nuxt server file server/index.js with command cross-env NODE_ENV=development nodemon server/index.js --watch server. However, in the guide you posted. You are using nuxt start command and it is not starting the server/index.js file. Which means all the extra route you write in server/index.js will not be exist.

You may try to solve it by replacing nuxt start to cross-env NODE_ENV=production node server/index.js in your Heroku.

[mikeglopez]

Hey @climba03003 thanks for the suggestion! I tried that and the app still starts up normally, but I'm still getting the same 404 error..

[JonathanWexler]

@mikeglopez I've also experienced this. I haven't had enough time to debug. For me, nuxt build and nuxt start locally also produces this issue.

[climba03003]

@mikeglopez I have created a test application at heroku which works perfectly fine. ( Note: It will be removed within one or two weeks )

Remove the Procfile file because it is not really needed. start command in package.json will be run by heroku automatically.

You may also access the gist for package.json and Procfile if you needed.

[climba03003]

@JonathanWexler If you are using create-nuxt-app, you will notice the start command in the package.json is not nuxt start and it have been replaced by cross-env NODE_ENV=production node server/index.js.

As my first comment, nuxt start is using the nuxt server. Which will not respect any code in your modified server. Run npm run start or yarn start instead.

[JonathanWexler]

Thanks @climba03003. That's right. Glad you pointed that out.

[mikeglopez]

Hey @climba03003 thanks! I'm not exactly sure what I did, I deleted some commented out code and changed my procfile (on my test app) and it's working properly now. Tried to replicate this on the actual app I'm working on and somewhat found what my issue is. On the app I'm working on, I installed axios when I created the app with create-nuxt-app so it gets added to the modules property in nuxt.config.js which allows me to use axios in pages/index.vue via this.$axios.$get('/test').. for some reason THIS is what was giving me the 404 error. Once I imported axios into index.vue and called axios.get('/search') it went through.. I'm now facing another issue possibly related to my code on the server, but that seems to be unrelated.

Thanks again! (And I'd love to hear if you know anything about why accessing axios through this isn't working once deployed to heroku)

[climba03003]

@mikeglopez I have updated my gist for your situation. I am facing the same issue when I change to use this.$axios.$get('/test') and push it to heroku. But after I add the axios setting in nuxt.config.js, it worked.

After I dig into the document . The main reason is that the default value of baseURL is http://[HOST]:[PORT][PREFIX]. And as we set HOST to 0.0.0.0 in heroku. Therefore axios is routed to http://0.0.0.0:3000/test which is an invalid URL and 404 occurred.

Check it at heroku.

[JonathanWexler]

@climba03003 what did you change to allow server-side API requests on your Heroku server given that the port is automatically assigned?

[climba03003]

@JonathanWexler
Check it at gist. I have highlight the change.

If you want to respect the prefix too. Change the baseURL to `http://localhost:${process.env.PORT || process.env.API_PORT || 3000}${process.env.API_PREFIX || '/'}`