Handle dev server (npm) and api on localhost

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 :slight_smile:

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
}

Yes, it is true. But the http port is 2000 (two thousand) while the https port is 2020 (twenty-twenty), so it is ok, right?
Also, the dev server can be run using https.

Something on your machine already listen on 2020. You need to find which process that is.

1 Like

The dev server (npm run dev or quasar dev) is listening on 2020. What I would like, it’s to be able to run the dev server and caddy, so I can use my api while testing.

It’s impossible with any server to have 2 different processes listening on the same port. They have to be on different ports. Run your dev server on a different port, and have Caddy handle reverse-proxy to your app.

1 Like

Thank you for your answer :slight_smile: This is what I wanted to know.

For what I have tried so far, if the dev server and caddy are listening on a different port then the frontend cannot reach the api. I would have to configure it so that it reaches a “different backend” when in dev mode than in production. I am affraid it would be error-prone if I misconfigure or forget something.

So, I will leave it as it is now: I build my app every time I want to test it.