1

I have a Nuxt frontend deployed to Google App Engine. Can I deploy Strapi to Netlify? Or is there a platform where I can deploy Strapi for free? Also after deploying what is the exact setting which needs to be changed in Nuxt?

My settings with apollo.

apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: 'http://localhost:1337/graphql',
    },
  },
},

@nuxtjs/strapi Settings in Documentation.

modules: ['@nuxtjs/strapi'],
strapi: {
  entities: ['restaurants', 'categories'],
  url: 'http://localhost:1337'
},

I guess I have to place the Heroku URL in place of localhost:1337 if I use @nuxtjs/strapi which I am not using currently? What if I want to use apollo? Where should I put the Heroku URL as it has httpEndpoint field for graphql URL?

kissu
  • 40,416
  • 14
  • 65
  • 133
Shubhang Chourasia
  • 153
  • 10
  • Use `process.env.STRAPI_URL` in place of the hardcoded `http://localhost:1337/graphql`. Then, in local, you can put the local URL in your `.env` file and on Google App Engine, you'll be able to have the actual Heroku URL of your Strapi app. As explained in my answer here: https://stackoverflow.com/a/67705541/8816585 – kissu Nov 21 '21 at 13:54
  • The env is accessible when I console.log(process.env) in store index.js file. But it is empty object when console logged inside mounted(). Why? – Shubhang Chourasia Nov 22 '21 at 09:13
  • You should not use `process.env` but rather `publicRuntimeConfig` here, as explained in [my answer above](https://stackoverflow.com/questions/70051914/where-to-deploy-strapi-backend-and-use-it-with-nuxt-frontend?noredirect=1#comment123837844_70051914). Also, `process.env` does not work but `process.env.myvariable` should because webpack is replacing the actual variable with a static value (your env value). – kissu Nov 22 '21 at 09:38
  • publicRuntimeConfig is working as it should. Also, can I do this in strapi options so that I can fetch data from localhost when in development and actual strapi url when deployed to app engine. strapi: { url: process.env.NODE_ENV === 'production' ? process.env.STRAPI_URL : 'http://localhost:1337' } – Shubhang Chourasia Nov 22 '21 at 12:19
  • This is not how env variables work. Locally, set `STRAPI_URL` in your `.env` file. And in production, set `STRAPI_URL` to the actual URL. That way, you have only one variable with the actual value coming from the env itself. – kissu Nov 22 '21 at 13:44
  • 1
    Yes, Thank You so much. It is working as expected. My Strapi backend is deployed to Heroku. And it was easy to integrate it with Nuxt using @nuxtjs/strapi module. – Shubhang Chourasia Nov 23 '21 at 18:58

1 Answers1

1

Strapi needs a Node.js server, so Heroku is a good idea. They do have a free tier dyno that takes some time to spin up but there is no issue since you will use it as a headless CMS.

Once deployed, you'll need to update the URL of Strapi in nuxt.config.js. And I guess that it's pretty much all.

You will have all of your info in their official docs: https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html

kissu
  • 40,416
  • 14
  • 65
  • 133