Can't launch Directus locally

[aerdnach]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

Hi, after local install (https://docs.directus.io/contributing/running-locally/) I'm getting this error via browser when trying to visit http://localhost:3055/

{"errors":[{"message":"Route /admin doesn't exist.","extensions":{"code":"ROUTE_NOT_FOUND","stack":"Error: Route /admin doesn't exist.\n at notFound (/home/andrea/code/work/directus/api/src/controllers/not-found.ts:22:8)"}}]}

I get redirect to http://localhost:3055/admin before the error: This is my .env:

KEY="directus"
SECRET="directus"
DB_CLIENT="mysql"
DB_HOST="localhost"
DB_PORT=3307
DB_USER="root"
DB_PASSWORD="root"
DB_DATABASE="directus"
ACCESS_TOKEN_TTL="7d"    
REFRESH_TOKEN_TTL="7d"
PORT=3055
PUBLIC_URL="http://localhost:3055/"

The strange thing is that I defined a custom api endpoint and it works great. I run Directus with npm run dev, but I get the same error if I try npm run dev -- --scope directus --scope @directus/app, or if i run the api before the app. Adding a / after admin won't help.

I'm using mysql 8.0.26, and rc 93.

To Reproduce

Follow the Directus doc guide at https://docs.directus.io/contributing/running-locally/

What version of Directus are you using?

v9.0.0-rc.93

What version of Node.js are you using?

v16.8.0

What database are you using?

mysql

What browser are you using?

chrome

What operating system are you using?

windows

How are you deploying Directus?

locally

[azrikahar]

The public url doesn't really change the port, but more so just for url resolution. It is odd that the config you shared doesn't show any PORT=3055, but it most likely just proxied from 3055 to localhost:8055. Are you sure it's 3055? you can check on the terminal:
Sorry I missed it x.x

And the reason it wasn't working (/admin) is because 8055/3055 is the API, not the APP. You should use the APP port which should be 8080 by default.

With that said, you can try to do the following:

• add/change these 2 env variables:

  PUBLIC_URL="http://localhost:8080"

• run npm run dev -- --scope directus --scope @directus/app
• wait app & api to start up (refer the above screenshot)
• go to http://localhost:8080 (not 3055)
• if you see this, click on the /admin/admin link:
  

[Nitwel]

Also, make sure to open http://localhost:8080/admin/ not http://localhost:8080/admin.

[joselcvarela]

https://docs.directus.io/reference/environment-variables/#environment-variables

As said in the docs, PUBLIC_URL is URL where your API can be reached on the web

So if you host your project on the web and have a DNS as https://my-directus-project.com so you should define PUBLIC_URL="https://my-directus-project.com".

This means PUBLIC_URL doesn't modify anything.
Just point things to the right place, like relative links, or relative image paths.

[aerdnach]

@azrikahar @Nitwel I followed your suggestion, but still having problems (see image above). Also @azrikahar you said "add/change these 2 env variables" but in code block i see only one.

Thanks for your help :)

[rijkvanzanten]

@aerdnach the build chain for the app is configured to point to 8055 by default here:

directus/app/vite.config.js

Line 32 in 6228257

target: process.env.API_URL ? process.env.API_URL : 'http://localhost:8055/',

Can you try setting the "API_URL" flag to `'http://localhost:3055/'?

(I always just leave it on the defaults, so haven't really tried this 😁 )

[aerdnach]

@aerdnach the build chain for the app is configured to point to 8055 by default here:

directus/app/vite.config.js

Line 32 in 6228257

target: process.env.API_URL ? process.env.API_URL : 'http://localhost:8055/',

Can you try setting the "API_URL" flag to `'http://localhost:3055/'?

(I always just leave it on the defaults, so haven't really tried this 😁 )

I was typing the same thing :) Yes, that was the problem. Now i can reach admin/.

Thanks

[fatihky]

Also, make sure to open http://localhost:8080/admin/ not http://localhost:8080/admin.

@Nitwel thank you so much for this trick but how about pointing these two endpoints to the same page?

[rijkvanzanten]

but how about pointing these two endpoints to the same page?

That's just a technical limitation of Vite i'm afraid. In production mode, this is already the case 👍🏻