Strapi Admin on Localhost not working after deploying on heroku

Questions and Answers
1

[details=“System Information”]

  • Strapi Version: 4.14.5
  • Operating System: Windows 10
  • Database: sqlite on local and postgresql on production
  • Node Version: >=20.8.1
  • NPM Version: >=9.6.3
  • Yarn Version: 1.22.19

I’m a new user of Strapi. I followed the guide in docs for deploying to Heroku. It finally worked after a lot of tinkering with the node and npm versions.

However after the deployment, I came back to my development environment on my localhost and it just stopped working.

The project builds but when I go to admin panel, it shows a cors error and then goes into infinite loading loop.

image
image751×435 33.1 KB

The production DB is postgres and local DB is sqlite.

Tried the “strapi develop --watch-admin” command and that opens up the admin panel but it takes me to login and no login works.

Either help me fix the CORS error or the login error. I have been stuck on this for a long time.

My database.js and server.js files are standard config files.

2

Hi @Khurram_Shahzad, hope this reply finds you well, as I understood you made production config for your Strapi with Heroku, you need check if the production env is running in your local, however you need check the NODE_ENV= in your .env if it’s pointed to NODE_ENV=production, if yes you can make it NODE_ENV=development, second thing you need check cors config in your strapi but easly you can check https://docs.strapi.io/dev-docs/configurations/middlewares#cors;

Thanks.

3

Thanks for the reply.
My configs are setup correctly for the production and development environments.
The application runs in development mode on local and production mode on deployment.

I have also enabled tried to setup CORS. This is my middleware.
module.exports = [
“strapi::errors”,
“strapi::security”,
{
name: “strapi::cors”,
config: {
headers: “Access-Control-Allow-Origin: http://localhost:1337”,
origin: [“*”],
},
},
“strapi::poweredBy”,
“strapi::logger”,
“strapi::query”,
“strapi::body”,
“strapi::session”,
“strapi::favicon”,
“strapi::public”,
];

NODE_ENV=development on local.

4

I found my mistake.

I had to rebuild the admin panel after any changes to my server.js file by running yarn build or npm run build command.
It fixed the issue after setting up the middleware for CORS correctly.