Build with Environment variables with caddy and docker that can access with reactJs app

[francislavoie]

@randikaisuru

3. Caddy version:

2.7.4

Please use the latest version, v2.7.6

@randikaisuru

EXPOSE 80

EXPOSE 443

This is redundant, the Caddy image already does this.

Either way, EXPOSE doesn’t actually do anything, it’s essentially just a documentation/marker.

@randikaisuru

:80 {

@randikaisuru

tls treblesolution@gmail.com

This doesn’t make sense. You shouldn’t configure tls for an :80 site.

@randikaisuru

    root * /srv

    route {
        reverse_proxy /api* iamge-name-backend:5300
        try_files {path} {path}/ /index.html
        file_server
    }

I would rewrite it like this:

	handle /api* {
		reverse_proxy iamge-name-backend:5300
	}

	handle {
		root * /srv
		try_files {path} {path}/ /index.html
		file_server
	}

@randikaisuru

(cors) {

You’re not actually using this in your config. Snippets don’t do anything unless you import them somewhere.

Anyway, are you sure you need it?

@randikaisuru

I am trying to access multiple env variables using process.env.VAL_NAME1 process.env.VAL_NAME2 on my frontend react app. But I am always getting undefined as a value of those env variables

That doesn’t have to do with Caddy, no.

Are you using Vite or something to build? If so you need to use import.meta.env.VAR I think. See the documentation for your build tool.

If you’re writing a NodeJS server app (not frontend JS), then process.env.VAR is what you’d use.

@randikaisuru

So I thought this need to be set on the build time

Correct, env vars are replaced at build time in your transpiled JS code. Unrelated to Caddy.