Netlify function running locally but not in production
zachheine opened this issue · 11 comments
Seems like a setting in the "axios" or "proxy" configuration, but I'm not sure which or what.
Found the problem - looks like the Nuxt Axios needs an additional environment variable:
From axios.nuxtjs.org/baseurl - baseURL:
Environment variable API_URL can be used to override baseURL
You can set it on Netlify on the following page:
Just make sure you set the value to where your site is hosted.
The README.md should be updated with this documentation - I'm going to run one or two more tests locally to ensure correct functionality, I'll post an update here
Alternatively it looks like you can set that value to / in Netlify and everything still works - perhaps its best to keep the baseURL: '/' in the Axios configuration in nuxt.config.js
@zachheine Pull the latest changes from master - tested the change locally and in production without the Netlify environment variable configuration. Give it a shot locally and let me know if this works for you:
In nuxt.config.js
// @nuxtjs/axios plugin configuration
axios: {
prefix: '/',
baseUrl: '/', // For the server
browserBaseURL: '/'
},
Hmm. Didn't seem to work. Could the proxy be affecting it?
Actually seems to work when I hit the lambdas route so might be an issue in my code...
Post the snippet here, I'd like to take a look!
In the component:
<p>{{ this.$store.state.user.username }}</p>
async fetch({ store, params }) {
await store.dispatch('getUser', params.id)
}
In the store:
export const state = () => ({
user: {}
})
export const mutations = {
SET_USER(state, user) {
state.user = user
}
}
export const actions = {
async getUser({ commit, store }, id) {
await this.$axios.$get(`/.netlify/functions/user?id=${id}`).then(user => {
commit('SET_USER', user)
})
}
}
I don't think the fetch() method works on the client side. I refactored to use the created() method and it is more or less working now. So those changes you proposed seem to be working.
AH - so what's happening here is that this app is deployed as a static site, so there's no server-side rendering - thus no fetch method either. I'd use the created() hook to fetch any async data from your lambdas - there might be way to deploy the Nuxt server as a lambda, definitely something to investigate
Yes, created() works fine. Any investigation of Nuxt server lambda welcome!
@zachheine Opened #3 :)