Skip to content

Netlify function running locally but not in production #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
zachheine opened this issue May 13, 2019 · 11 comments
Closed

Netlify function running locally but not in production #2

zachheine opened this issue May 13, 2019 · 11 comments

Comments

@zachheine
Copy link
Contributor

Seems like a setting in the "axios" or "proxy" configuration, but I'm not sure which or what.

@aeksco
Copy link
Owner

aeksco commented May 13, 2019

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:
Screenshot from 2019-05-13 19-46-52

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

@aeksco
Copy link
Owner

aeksco commented May 13, 2019

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

@aeksco
Copy link
Owner

aeksco commented May 14, 2019

@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: '/'
  },

@zachheine
Copy link
Contributor Author

Hmm. Didn't seem to work. Could the proxy be affecting it?

@zachheine
Copy link
Contributor Author

Actually seems to work when I hit the lambdas route so might be an issue in my code...

@aeksco
Copy link
Owner

aeksco commented May 14, 2019

Post the snippet here, I'd like to take a look!

@zachheine
Copy link
Contributor Author

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

@zachheine
Copy link
Contributor Author

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.

@aeksco
Copy link
Owner

aeksco commented May 14, 2019

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

@zachheine
Copy link
Contributor Author

Yes, created() works fine. Any investigation of Nuxt server lambda welcome!

@aeksco
Copy link
Owner

aeksco commented May 14, 2019

@zachheine Opened #3 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants