Strapi admin page will not load when using a non-default URL

[AugustZellmer]

Bug report

Describe the bug

Strapi admin page will not load when using a non-default URL. The spinner just spins forever. There are no errors.

Steps to reproduce the behavior

Add a relative URL to the server.js file, kinda like this:

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env('URL', '/cms'),
  admin: {
    auth: {
      secret: env('ADMIN_JWT_SECRET', '2380253secretKey23505901'),
    },
  },
});

Rebuild Strapi using npm run build --clean.
Launch Strapi (if it didn't already launch itself after the build).
Navigate to https://localhost:1337/cms/admin.

Expected behavior

The admin page loads.

Actual behavior

The page loads, but the spinner spins forever and the login form never shows. The logs have no errors, they just say

[2021-05-10T20:54:26.390Z] debug GET /cms/admin/runtime~main.6b4d830a.js (5 ms) 200
[2021-05-10T20:54:26.390Z] debug GET /cms/admin/main.0ba3adc6.chunk.js (1 ms) 200
[2021-05-10T20:54:26.810Z] debug GET /cms/admin/init (1 ms) 200
[2021-05-10T20:54:26.876Z] debug GET /favicon.ico (1 ms) 200

System

• Node.js version: 14.16.1
• NPM version: 6.4.12
• Strapi version: 3.6.1
• Database: postgres
• Operating system: Ubuntu and Google Cloud Platform

Additional context

Removing the URL specification from the server.js file fixes the problem, but I need that URL to be there.

[derrickmehaffy]

You need a proxy and you should use an absolute URL, see the following documentation:

https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/configurations.html#server
https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment.html#optional-software-guides

Marking as closed as this isn't a Strapi bug, but an environment issue, for environment issues please use the forum: https://forum.strapi.io

[derrickmehaffy]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/how-to-change-the-root-directory-to-a-subdirectory/4842/1

[denics]

Thanks Derrick, but I do not think that this is an issue with the environment because it was working fine using haproxy + strapi under the /strapi with version 3, but it is broken, not working anymore with the same configuration but using strapi 4.

In strapi 4 I have:

$ cat /home/vhosts/strapi4/config/server.js
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  proxy: env.bool('IS_PROXIED', true),
  url: env('PUBLIC_URL', ''),
  app: {
    keys: env.array('APP_KEYS'),
  },
});

where PUBLIC_URL, from my .env, is

PUBLIC_URL='https://www.dev.myserver.org/strapi'

and haproxy backend is:

frontend dev_cluster
    acl             url_strapi path_beg -i /strapi
backend strapi
    balance         roundrobin
    bind-process    1
    option          httpchk HEAD '/_health'
    http-request    set-path "%[path,regsub(^/strapi/?,/)]"
    server          www www.dev.myserver.org:1337 check inter 2000 rise 2 fall 5
...

The result of this is a nice:

{"data":null,"error":{"status":404,"name":"NotFoundError","message":"Not Found","details":{}}}

System

    Node.js version: 16.15.1
    Yarn version: 1.22.19
    Strapi version: 4.1.12
    Database: mysql
    Operating system: Debian
    Node Manager: PM2

Can you please reopen this?

[cyrusn]

I have the similar setting with

Thanks Derrick, but I do not think that this is an issue with the environment because it was working fine using haproxy + strapi under the /strapi with version 3, but it is broken, not working anymore with the same configuration but using strapi 4.

In strapi 4 I have:

$ cat /home/vhosts/strapi4/config/server.js
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  proxy: env.bool('IS_PROXIED', true),
  url: env('PUBLIC_URL', ''),
  app: {
    keys: env.array('APP_KEYS'),
  },
});

where PUBLIC_URL, from my .env, is

PUBLIC_URL='https://www.dev.myserver.org/strapi'

and haproxy backend is:

frontend dev_cluster
    acl             url_strapi path_beg -i /strapi
backend strapi
    balance         roundrobin
    bind-process    1
    option          httpchk HEAD '/_health'
    http-request    set-path "%[path,regsub(^/strapi/?,/)]"
    server          www www.dev.myserver.org:1337 check inter 2000 rise 2 fall 5
...

The result of this is a nice:

{"data":null,"error":{"status":404,"name":"NotFoundError","message":"Not Found","details":{}}}

System

    Node.js version: 16.15.1
    Yarn version: 1.22.19
    Strapi version: 4.1.12
    Database: mysql
    Operating system: Debian
    Node Manager: PM2

Can you please reopen this?

I have a similar setting to you. I found that when I load the pages, the src of javascript files didn't change to /strapi/admin. I think that is why it crashed.

<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="mobile-web-app-capable" content="yes"/><title>Strapi Admin</title><script defer="defer" src="/admin/runtime~main.eb3e2907.js"></script><script defer="defer" src="/admin/main.b5a91f8b.js"></script></head><body><div style="min-height:100%" id="app"></div></body></html>```