forgive me for asking, but why do you think you need the frontend and backend on different domains?

what's wrong with domain.com as the frontend and api.domain.com as the backend? this in fact is exactly how railway does it

I must have explained it wrong. But I meant that backend and frontend are on different services on Railway. At the same time I would like to have one domain. But that requests are proxied not to the subdomain, but just to /api

right I totally get that, I'm just asking why you want to have one domain

Conditionally:

my site: https:/netrix.fun is where people go.

and to do a search, you have to send a request to https://netrix.fun/api.

why not api.netrix.fun

It's hard to say, I guess I thought that's how a lot of sites worked

I don't really care.

not really, like I said, railway has different domains for the frontend and backend

perfect, then stick with different domains!

have your frontend call the backend domain and call it a day

Sorry, I still don't understand how it works. That is, I need to keep only netrix.fun for the frontend service. And for backend service add api.netrix.fun? (On the screenshot of the frontend service settings)

that is correct

And how will it look like in the react code?

To avoid writing a full url for each request, are there any practices for this? I am currently using this config. So that requests can be organized like this:

axios.get('/api/users/me/guilds')

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8000',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },

            '/discord': {
                target: 'https://discord.com/api/v10',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/discord/, ''),
                secure: false
            }
        }
    },
    resolve: {
        alias: {
            '@constants': path.resolve('./src/constants'),
            '@utils': path.resolve('./src/utils'),
            '@components': path.resolve('./src/components'),
        },
    }
})

can you link me to your deployment for the frontend please

Where do I get it? I just haven't deployed the full application yet, so far I only have a mini-flask application active that outputs text to the page - it's just on this netrix.fun domain.

That's why I opened this thread, to understand how to run both backend and frontend correctly

open the deployment and copy the url

oh you dont even have it deployed, then please share the repo for the frontend so i can let you know how to make it production ready

one min

https://github.com/netrix-team/frontend I also sent you an invitation. Since this repository is hidden

@Brody 👆🏻👆🏻👆🏻

alright we are going to do this in steps, trust the process

first, remove all the proxy stuff from the config file, just straight delete the proxy stuff

I was looking at your template for Vite + React, and was also thinking of using Canddy

we will be using that for sure, but one step at a time

done

i have yet to see the proxy stuff being useful in production, its only ever in the way of shipping to production

you can remove the server line too

do you have the backend deployed on railway and working?

No, but I can try running it now.

yeah lets do that, your frontend is going to need something to call after all

Okay, I'll try to get it up and running as soon as possible.

let me know if you have any troubles

Great, seems to have successfully launched https://api.netrix.fun/docs

have you tested it?

I made a couple of requests to unsecured endpoints, all successfully returned a response

good enough for me

back to frontend

well first, does the backend actual use an /api path?

wdym thinking lol, you coded it right?

In the Vite configuration, I specified /api just for convenience so I don't have to write the whole url in its entirety. And so the backend is now at api.netrix.fun

right but is the backend itself using /api as a route

Uh, no

without /api, immediately starting with categories, /users, /guilds etc.

then whereever you where calling /api replace it with an environmental variable called VITE_BACKEND_URL

so?

env*

Done. Replaced /api wherever it was

that works, though i much prefer the + syntax

I don't know about that. In fact, I just started learning react

"string" + "string"

got it

Yeah, well, that's an option

so how are you calling the discord api from the frontend with auth?

first user authorizes through discord bot, then special code - which we received from discord - is sent to backend where it is exchanged for access token and then it and all necessary data are entered into jwt token. Which in turn comes to the frontend and is stored in local storage

gotcha, well go ahead and make the necessary code changes for that since you arent using a proxy anymore for that

I only use the discord api in two places on the frontend so I just copied the full path

sounds good

copy the nixpacks.toml and Caddyfile from this repo into yours

done

do you have a service on railway already?

for the frontend that is

yep

link please

https://railway.app/project/49c5f0bc-621a-4388-8576-9a3edb59e080/service/ececc5da-5cad-47bc-92a3-b440194fc9fd/settings

I hope I threw the right thing 😅

now set a VITE_BACKEND_URL=https://${{backend.RAILWAY_PUBLIC_DOMAIN}} variable on the frontend service

and to save it, just this once, do alt + shift + enter

all right

oops

updated

do the fancy save again this time too

it saves the change without triggering a deploy, you can do that whenever you are just about to deploy code, no need to make two deployments

Didn't know about this, it's very helpful. Thank you

okay frontend domain is good, push your changes to github

and now you just press the button because you do want it to redeploy

It's crashing now because there was a mini-flask app running on this service earlier. I've fixed it now

Everything is working successfully

But requests take a long time to process for some reason. I thought when I publish the application it will be much faster. I had it running locally for 150-200 milliseconds. I don't know what this has to do with

you are now physically farther way to railways servers than you are with localhost, they are not comparable

you just need to choose the railway region closest to you

same with the backend, and then the database the backend uses, though preferably you would use a railway hosted database

I think I'll survive the delay, as my site was originally intended for American and European audiences

Yeah, that's what I was going to do. The current database is a test database. For production, they'll be located on railway

alright, anything else you need help with?

I guess not. Bro, you've been a big help. Thanks for your time

no problem!