How to start keystone in a sub-path in embedded next.js app?

[salvatorericcardi]

trafficstars

How to reproduce the problem

How can I start keystone app on sub-folder instead of root? For example I have mydomain.it with next.js app and I would like to map keystone app to mydomain.it/admin. I'm using ExtendExpressApp in keystone config but it works after the server started and I need to work before the server starts. Is there another way?

What I'm expecting

I'm expecting to start keystone app to mydomain.it/admin to avoid an eaddrinuse error as below.

Screenshot

Contextual informations

• I'm using keystone embedded nextjs app
• nextjs app run on mydomain.it and I would like to start keystone app on mydomain.it/admin instead of repeating it on mydomain.it and this is why the eaddrinuse error
• node v18.12.1 + chrome@latest

[TheRealFlyingCoder]

To clarify, are you trying to run 2 separate Next.js apps, where the domain root is your "public site" for example, and everything inside /admin is keystone?

[salvatorericcardi]

I'm running a keystonejs embedded nextjs app as in this repository https://github.com/keystonejs/keystone/tree/main/examples/embedded-nextjs

I would like to run the nextjs app in my "public site" and the keystonejs app inside /admin. Is there a way or I have to install two separate project, one for "public site" and another one for /admin?

[salvatorericcardi]

Hi everyone, in my opinion I detected the problem!

Look at this article: https://keystonejs.com/blog/embedded-mode-with-sqlite-nextjs#add-keystone-to-next-js-config

In the article above, it's explained how to build an embedded app, but the withKeystone funcion should be modified because in this version (embedded) in my opinion the withKeystone that starts the keystone app should run under a sub-path.

What do you think about it? Is it possible to plan this update or similar?

[junaid33]

Being able to set a sub-path under withKeystone would be really nice. I'm also using Next.js with Keystone and want the Admin UI under "/admin" and the main app under "/index".

[salvatorericcardi]

Hey guys, look here: https://github.com/keystonejs/keystone/blob/main/packages/core/src/lib/server/createExpressServer.ts from line 56 to 108.

Here we create the AdminUI server and we could create server on a sub-path instead

@dcousens what do you think about it?

[flexdinesh]

@riccardi1997 do you want to run two servers or one server?

If you want a separate API server (Keystone) and a separate Next.js frontent, you would have to run them in two separate servers (eg. frontend.mydomain.it and api.mydomain.it) and proxy your requests from mydomain.it to frontend.mydomain.it and the requests from mydomain.it/admin to api.mydomain.it using a reverse proxy like nginx. You might probably have to dockerise your applications as well.

If you are going to be running a single server (embedded Keystone in a Next.js server), then currently there is no way built in way to set Admin UI to /admin path since the Admin UI is currently set as the homepage. Please note that extendExpressApp is to customise the Keystone server and not start another server.

Worth mentioning that with the work we have planned for the roadmap, you will be able to serve the Admin UI homepage from any path you want in the near future but it is not possible at the moment.

[TheRealFlyingCoder]

@flexdinesh that was why I asked my original question, they are running two applications haha

I'm setting up my environment with the route proxy atm and it is the best solution for a number of reasons, including flexible scaling, split deployments etc etc.

Your end-users won't notice the diference and it'll take a lot of complexity out of the solution.

It does push you towards the setup of a Monorepo environment though and there are still a few known issues with in Keystone.

[salvatorericcardi]

I need to work a little bit. Keep open this issue please, I'll give you a feedback as soon as possible. Thanks guys @flexdinesh @TheRealFlyingCoder

UPDATE: Only one question. How can I map the keystone app to mydomain.it/admin? Because my apps start on mydomain.it but in two different ports and I understand that reverse proxy is for mapping the keystone app to mydomain.it/admin for example, right?

[salvatorericcardi]

Hey guys! I've almost done. Below there is a piece of my nginx.conf:

location /admin {
    rewrite /admin/(.*) /$1 break;
    
    proxy_set_header    Host $host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Proto $scheme;

    proxy_pass          http://mydomain.com:3000;
    proxy_read_timeout  90;

    proxy_redirect      http://mydomain.com:3000 https://mydomain.com/admin;
}

I can't understand why if I search mydomain.com/admin it will redirect me to https://mydomain.com/signin?from=%2Fadmin that is the signin page of keystone.

Obviously I can't find the page cause of the wrong rewrite rule, but is there someone can help me with the rewrite rules? I would to search mydomain.com/admin and receive the keystone signin page without strange redirects.

UPDATES: Look here for a complete configuration https://steveholgado.com/nginx-for-nextjs/#adding-our-nginx-configuration

[flexdinesh]

This is from an old nginx conf I had. I don't use it anymore but it might help. Try this.

upstream api {
  server api:8080; # use your own url
}

server {
  ...

  # keystone graphql api
  location /api/ {
    proxy_pass http://api/api/;
  }

  # keystone Admin UI paths
  location /admin {
    rewrite ^/admin/(.*) /$1 break;
    rewrite ^/admin / break;
    proxy_pass http://api;
  }

  # keystone Admin UI SPA
  location /_next {
    proxy_pass http://api;
  }
}

[salvatorericcardi]

Hi @flexdinesh after a lot of tests in my opinion I have an issue with Prisma Client and my connection string to db.

The error:

And after dockerized my full app this is my connection string: DATABASE_URL=mysql://[user]:[password]@asdfondi_default:3306/[db_name] DATABASE_URL=mysql://[user]:[password]@localhost:3306/[db_name]

I mapped the container port on 3306 but independently I use localhost or any other hostname as asdfondi_default (that is the network created from container) it doesn't work. It's strange so I started to think there is an issue with PrismaClient as showed. Thanks

[flexdinesh]

I don't think prisma client is the issue. Perhaps you could try to ssh into your docker container and see if you could ping the mysql server to check if the connection url works.

[marcellino-ornelas]

+1 on getting keystone to run on a custom route. Im building a portfolio website and using keystone for backend and react for my frontend.

Im trying to integrate react-router into my application, however when trying to go to a route like localhost:3000/projects and refreshing the page it redirects me to keystones sign in page