Help Setting up frontend with the backend hosted on Railway
richardpinewood
HOBBYOP

a year ago

Hey guys,i am building a project using html,css and javascript in the forntend, and in the server side nodejs, now i am facing a problem were i dont know how to connect the frontend with the new backend route ,since now it is being hosted on railway.

Solved

155 Replies

richardpinewood
HOBBYOP

a year ago

N/A


richardpinewood
HOBBYOP

a year ago

i can see the link up


richardpinewood
HOBBYOP

a year ago

and i even tried to change the route in my frontend


richardpinewood
HOBBYOP

a year ago

heres an example : ```const form = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');

form.addEventListener('submit', async (e) => {
e.preventDefault();

const email = emailInput.value.trim();
const password = passwordInput.value.trim();

if (!email || !password) {
alert('Por favor preenche os campos em branco');
return;
}

const data = { email, password };

try {
const response = await fetch('https://zethirahd-production-c2af.up.railway.app/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});

const result = await response.json();

if (response.ok && result.token) {
  alert('Login feito com sucesso!');

  localStorage.setItem('token', result.token);

  window.location.href = '/home.html';
} else {
  alert(result.message || 'Erro no sistema!');
}

} catch (error) {
alert('Um erro ocorreu, tente novamente mais tarde');
console.error('Login error:', error);
}
});
```


a year ago

any logs on the api?


a year ago

I just tested a POST request to that address through my http client and it returned 404


richardpinewood
HOBBYOP

a year ago

you mean in the backend ?


richardpinewood
HOBBYOP

a year ago

i see this logs on railway : MongoDB connection error: MongooseError: The uri parameter to openUri() must be a string, got "undefined". Make sure the first parameter to mongoose.connect() or mongoose.createConnection() is a string.

at NativeConnection.createClient (/app/node_modules/mongoose/lib/drivers/node-mongodb-native/connection.js:225:11)

at NativeConnection.openUri (/app/node_modules/mongoose/lib/connection.js:1016:34)

at Mongoose.connect (/app/node_modules/mongoose/lib/mongoose.js:446:15)

at Object. (/app/server.js:18:4)

at Module._compile (node:internal/modules/cjs/loader:1364:14)

at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)

at Module.load (node:internal/modules/cjs/loader:1203:32)

at Module._load (node:internal/modules/cjs/loader:1019:12)

at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)

at node:internal/main/run_main_module:28:49

Error: ENOENT: no such file or directory, stat '/ZethiraHD/home.html'


a year ago

the error is happening in your mongodb connection in your api


a year ago

your api is prob crashing before even serving routes


richardpinewood
HOBBYOP

a year ago

so the problem is with my database ?


a year ago

yes, did u also deploy a database in railway?


richardpinewood
HOBBYOP

a year ago

i did ,used mongodb


richardpinewood
HOBBYOP

a year ago

1342564813070405600


a year ago

nice, and how did u point your API to use that db?


a year ago

if u used the private url from the DB railway would show a connection arrow between your API ---> MongoDB on the dashboard


a year ago

but the error says it received a undefined URI


richardpinewood
HOBBYOP

a year ago

i used a .env file to store the connections off my Mongodb databse….


a year ago

did u manage to make it work @Richard Pinewood ?


richardpinewood
HOBBYOP

a year ago

Not yet, i am going to see if i can solve the problem tomorrow!


a year ago

ok


richardpinewood
HOBBYOP

a year ago

it crashed 😭


richardpinewood
HOBBYOP

a year ago

can anyone just guide me in simple terms ?


a year ago

medim can't read minds yet, you need to tell him the specific errors


richardpinewood
HOBBYOP

a year ago

i was able to setup it once,with a old project in the free tier


richardpinewood
HOBBYOP

a year ago

now this project has more things


a year ago

^


richardpinewood
HOBBYOP

a year ago

for now it is appearing this : Mongo URI from .env: undefined

MONGO_URI is not defined. Check the .env file.


richardpinewood
HOBBYOP

a year ago

in the logs


richardpinewood
HOBBYOP

a year ago

i have installed dotenv


a year ago

please do not use .env in a production environment


richardpinewood
HOBBYOP

a year ago

```require("dotenv").config({ path: "./.env" });

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const path = require("path");
const authRoutes = require("./routes/userRoutes");

const app = express();
const PORT = process.env.PORT || 5000;
const MONGOURI = process.env.MONGOURI;

console.log("Mongo URI from .env:", MONGO_URI);

if (!MONGOURI) { console.error(" MONGOURI is not defined. Check the .env file.");
process.exit(1);
}

app.use(cors());
app.use(express.json());

mongoose
.connect(MONGO_URI)
.then(() => console.log("Connected to MongoDB"))
.catch((err) => console.error("MongoDB connection error:", err));

app.use("/uploads", express.static(path.join(dirname, "uploads"))); app.use(express.static(path.join(dirname, "../frontend/build")));

app.use("/api/auth", authRoutes);

app.get("/", (req, res) => {
res.sendFile(path.resolve(__dirname, "../ZethiraHD/home.html"));
});

app.listen(PORT, () => console.log(Server running on port ${PORT})); ```


a year ago

but I'll let medim take it from here


richardpinewood
HOBBYOP

a year ago

why is it wrong ?


a year ago

.env is for local development only


richardpinewood
HOBBYOP

a year ago

i hided the file from github


richardpinewood
HOBBYOP

a year ago

shouldnt be bcs of this ?


richardpinewood
HOBBYOP

a year ago

or railway will crash bcs of it ?


a year ago

railway has nothing to do with .env files


richardpinewood
HOBBYOP

a year ago

but thats were i store the mongodb_url


a year ago

^


richardpinewood
HOBBYOP

a year ago

this is my repo just in case if anyone is intrested to understand the project : https://github.com/RichardPinewood/ZethiraHD


a year ago

^


a year ago

ok you don't seem to be commiting your .envwhich is good


a year ago

but did you set the service variables in railway?


a year ago

no .env file, but there are multiple node_modules folders 😦


a year ago

ye


a year ago

@Richard Pinewood are you setting the service variables? also gitignore your node_modules


richardpinewood
HOBBYOP

a year ago

i didnt add any variables yet

1342852856276848600


richardpinewood
HOBBYOP

a year ago

in my backend


richardpinewood
HOBBYOP

a year ago

@Medim


richardpinewood
HOBBYOP

a year ago

1342853475951837200


richardpinewood
HOBBYOP

a year ago

what variable should i add ? the Mongo_URL ?


a year ago

that's the issue


a year ago

in your backend you use the MONGO_URI var


a year ago

so you need to set it in the service variables


a year ago

MONGO_URI=YOUR-MONGODB-URL


a year ago

which you can use the reference variables from railway


a year ago

the ones displayed here


a year ago

so, the field VARIABLE_NAME would be MONGO_URI and the VALUE would be the reference to the mongodb url


a year ago

1342855478396321800


a year ago

could u try that @Richard Pinewood ?


richardpinewood
HOBBYOP

a year ago

But do i need to put the real credentials?


richardpinewood
HOBBYOP

a year ago

Like i did in the enviormental file?


a year ago

yes


a year ago

but in this case, you can use the reference variable just like I showed here


a year ago

I mean, it needs to be the "real credential" otherwise how would it work? <:thonk:969365165688635464>


a year ago

and by "real credential" I mean the mongodb one that is hosted on railway


a year ago

could u try that @Richard Pinewood ?


richardpinewood
HOBBYOP

a year ago

1342859896445472800


a year ago

exactly.


a year ago

just one issue


a year ago

in your code you use MONGO_URI (with an i)


a year ago

you wrote MONGO_URL (with a l)


a year ago

just the variable name


a year ago

the value is correct


richardpinewood
HOBBYOP

a year ago

oh damn,i didnt noted that lmao


richardpinewood
HOBBYOP

a year ago

lets see


richardpinewood
HOBBYOP

a year ago

it still appears the same issue


a year ago

^


richardpinewood
HOBBYOP

a year ago

1342861281534808000


a year ago

^


a year ago

^


richardpinewood
HOBBYOP

a year ago

wait,in the beggining should it be URI to ?


richardpinewood
HOBBYOP

a year ago

were it is these {}

1342862241468514300


a year ago

it needs to be exactly as this screenshot


richardpinewood
HOBBYOP

a year ago

hmmmm


a year ago

the first field should be MONGO_URI


richardpinewood
HOBBYOP

a year ago

i will delet the variable and do it again


a year ago

yours is MONGO_URL


a year ago

the second one you shouldn't change, since it's a reference variable


a year ago

that works.


richardpinewood
HOBBYOP

a year ago

what if i change in the code ?


richardpinewood
HOBBYOP

a year ago

to URL ?


a year ago

then u would change the service variable name to MONGO_URL too.


a year ago

to match what your code uses.


richardpinewood
HOBBYOP

a year ago

do i need to add the "i" in the end ?


richardpinewood
HOBBYOP

a year ago

i wrote this : ${{MongoDB.MONGO_URI}}


richardpinewood
HOBBYOP

a year ago

yoo,the error dissapeared,now it is giving me a diffrent one funny


richardpinewood
HOBBYOP

a year ago

```MongoDB connection error: MongoParseError: Invalid scheme, expected connection string to start with "mongodb://" or "mongodb+srv://"

at new ConnectionString (/app/node_modules/mongodb-connection-string-url/lib/index.js:86:19)

at parseOptions (/app/node_modules/mongodb/lib/connection_string.js:185:17)

at new MongoClient (/app/node_modules/mongodb/lib/mongo_client.js:53:63)

at NativeConnection.createClient (/app/node_modules/mongoose/lib/drivers/node-mongodb-native/connection.js:312:14)

at NativeConnection.openUri (/app/node_modules/mongoose/lib/connection.js:1016:34)

at Mongoose.connect (/app/node_modules/mongoose/lib/mongoose.js:446:15)

at Object. (/app/server.js:25:4)

at Module._compile (node:internal/modules/cjs/loader:1364:14)

at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)

at Module.load (node:internal/modules/cjs/loader:1203:32)```

richardpinewood
HOBBYOP

a year ago

let me see if i can fix this first


a year ago

that is wrong


a year ago

that var shouldn't be changed, that var is provided by the MongoDB database you deployed, I think you're confusing things up a bit.


a year ago

but seems like you app finally recognized the env var


a year ago

just the value of it is wrong, since you changed it


richardpinewood
HOBBYOP

a year ago

i added the i later on before i checkmark the variable


a year ago

what does your var looks like right now?


richardpinewood
HOBBYOP

a year ago

1342867995252228400


richardpinewood
HOBBYOP

a year ago

it looks like this


a year ago

why is there an "i" at the end


a year ago

you SHOULDN'T change the value field


a year ago

1342868223573627000


richardpinewood
HOBBYOP

a year ago

isnt this an i ?


a year ago

.


richardpinewood
HOBBYOP

a year ago

so i dont need to put an i at the end of the value ?


a year ago

No, and you should never do that


richardpinewood
HOBBYOP

a year ago

i mean you forgot remove it in your example lol


a year ago

it should be ${{MongoDB.MONGO_URL}}


a year ago

I didn't put it in my example


richardpinewood
HOBBYOP

a year ago

but URL in my case is URI


a year ago

I put it in the name


a year ago

that doesn't matter.


a year ago

just put it that way


a year ago

and it should work flawlessly


a year ago

just as I said in the first example I gave you


richardpinewood
HOBBYOP

a year ago

1342869773783928800


richardpinewood
HOBBYOP

a year ago

omg i feel so dumb ahaha


richardpinewood
HOBBYOP

a year ago

but have a look


richardpinewood
HOBBYOP

a year ago

now no red errors are appearing in the logs yeiii


richardpinewood
HOBBYOP

a year ago

i think the back is working fine !


richardpinewood
HOBBYOP

a year ago

now lets setup the frontend !


richardpinewood
HOBBYOP

a year ago

i will use netlify for that


a year ago

congrats, you made it work


a year ago

remember to also set the rest of your vars


a year ago

and also remember this help thread isn’t for coding help, this wasn’t a railway related issue.


a year ago

railway docs also introduce you on how it works so you should also take a look at it


richardpinewood
HOBBYOP

a year ago

the other variables like how many ?


a year ago

?


a year ago

that’s defined by you


a year ago

did you use any other var in your project? any other process.env.var-here?


a year ago

what did you have in your .env?


a year ago

everything there can be a service var


richardpinewood
HOBBYOP

a year ago

no,i just have a .evn file in the backend


richardpinewood
HOBBYOP

a year ago

and in that enviromental i just stored the MONGO_URI,and the port


a year ago

cool, so seems like you’re set.


richardpinewood
HOBBYOP

a year ago

for the frontend part,i just need to call the link they provide us right ?


a year ago

you will generate a domain in the backend service settings


a year ago

and call that domain in your frontend


richardpinewood
HOBBYOP

a year ago

damnn,its workingg !


richardpinewood
HOBBYOP

a year ago

i dont even need to use my machine to run my web-apps !


a year ago

cool! so can Brody close this thread now?


richardpinewood
HOBBYOP

a year ago

i mean,yheaa


richardpinewood
HOBBYOP

a year ago

its working fine now !


a year ago

@Brody


a year ago

!s


Status changed to Solved brody about 1 year ago


Loading...