1. The problem I’m having:
I am currently developing an app using vuejs (quasar exactly). I would like to be able to run the dev environment for my frontend (npm run dev
) AND my backend (node server) at the same time locally.
When I run npm run dev
or (quasar dev
), a dev server is created. When I connect to localhost:[portNumber] I can see some pages of my app.
To really test my app, I need data from my api/backend, served with https locally thanks to caddy. I do not manage to make the backend and the frontend work at the same time.
Instead I have to build my app, to be able to connect to the backend through it. It works, but it is not convenient and very time consuming.
Would it be possible to run a npm dev server and caddy at the same time?Caddy would “just” have to reverse proxy to the backend api.
Thanks a lot
2. Error messages and/or full log output:
If I start caddy first I get this when running quasar dev, and I cannot reach the backend (not the same port)
Setting port to closest one available: 2021
If I start caddy after running quasar dev, I get this:
Error: loading initial config: loading new config: http app module: start: listening on :2020: listen tcp :2020: bind: address already in use
Error: caddy process exited with error: exit status 1
3. Caddy version:
v2.9.1
4. How I installed and ran Caddy:
a. System environment:
Ubuntu 22 LTS - caddy is not running through systemd (local testing)
b. Command:
caddy start
d. My complete Caddy config:
{
http_port 2000
https_port 2020
}
localhost:2020 {
file_server / {
root ./backend/public/api/
}
route /api/* {
rewrite /api/* /
file_server {
root ./backend/public/api/
}
try_files * /index.html
header Cache-Control "no-cache, no-store, must-revalidate"
}
handle_path /js/* {
root ./backend/public/api/js/
file_server
header Cache-Control "no-cache, no-store, must-revalidate"
}
handle_path /css/* {
root ./backend/public/api/css/
file_server
header Cache-Control "no-cache, no-store, must-revalidate"
}
handle_path /fonts/* {
root ./backend/public/api/fonts/
file_server
header Cache-Control "no-cache, no-store, must-revalidate"
}
handle_path /img/* {
root ./backend/public/api/img/
file_server
header Cache-Control "no-cache, no-store, must-revalidate"
}
route /ajax/* {
reverse_proxy localhost:3000
}
@post {
method POST
}
reverse_proxy @post localhost:3000
encode gzip
}