Problems getting images and displaying console.log() on a Railway deployment
A request is made from the client to the server to obtain articles.
In the Visual Studio Code deployment, the images are obtained and the server's console.log() messages are displayed.
In the Railway deployment, the images are not obtained and the server's console.log() messages are not displayed. However, the clients are obtained. In the server's GET function, on the first line, I have a console.log() to know that I made the request to the correct route. From Visual Studio Code, it appears, but not from the Railway console.
I'm using Next.js.
Has anyone had a similar problem? How can I fix it?
25 Replies
Project ID:
a85b4083-30a6-432a-b467-33c809a8c6f7ID:a85b4083-30a6-432a-b467-33c809a8c6f7
what is the status code of the request you get when making an api call to the app that is hosted on railway?
The status code is 200 since it returns the articles.
Now I will show you the terminal outputs from Visual Studio Code and Railway. They both have the same code and execute the same route. In Visual Studio Code, it's from localhost, and in Railway, it's from the provided one.
Railway Deploy Logs:
- next start
- ▲ Next.js 14.0.3
- Local: http://localhost:5537
- ✓ Ready in 418ms
Visual Studio Code Terminal Output:
- GET catalogo/
- Database connected: * myvdescartablesdb
- GET productos- categorias
- GET productos- categorias
- GET catalogo/
how are you running your app in vscode?
With the nextjs npm run dev command.
try running your app locally with the same command railway runs it
npx next dev
▲ Next.js 14.0.3
- Local: http://localhost:3000
- Environments: .env.local
✓ Ready in 4.5s
○ Compiling /catalogo ...
✓ Compiled /catalogo in 5.5s (2538 modules)
○ Compiling /api/catalogo/categorias ...
✓ Compiled /api/catalogo/categorias in 3.1s (1355 modules)
✓ Compiled (1357 modules)
GET catalogo/
GET productos- categorias
Base de datos conectada: * undefined
Base de datos conectada: * myvdescartablesdb
✓ Compiled /api/catalogo/[articuloID]/imagenes/[imageName] in 298ms (1359 modules)
GET catalogo/
GET productos- categorias
Base de datos conectada: * myvdescartablesdb
Base de datos conectada: * myvdescartablesdb
try running your app locally with the same command railway runs it
I assume you need to build it first
I managed to build the app and also added in Railway that I used the same command npx next build. The issue I'm facing is that it doesn't show me the commands. The strange thing is that if I perform a NextResponse, I can get it from the client, but it doesn't show me the console.log(). In fact, I simplified the GET function to a NextResponse and a console.log, and that's what happens.
const GET = async () => {
console.log("GET catalogo/");
return NextResponse.json({
message: "GET catalogo/",
data: [],
});
}
export { GET };
In the client's server, I get the correct message, but in the terminal, I don't see the console.log().so the app does work as designed, its only that you arent seeing those console.log()'s?
Yes.
It works fine, it's just that I can't see the console.log() messages, and then when I put the complete code, some images in the articles don't load. I have the same code in another route, but the difference is that when fetching the articles from MongoDB, it only gets the articles that match a subcategory.
const products = await Product.find()
const products = await Product.find({ CATEGORIA: categoriaName})
And this one does show all console.log() messages and the images on the client.when you run the app with
npm run start locally, are you seeing the console logs?Yes, I see the logs in the Visual Studio Code terminal. I can also see the images as soon as the page loads on localhost.
However, when I do it from Railway using the same build and deployment commands as locally, I can't see the images, and I also can't see the console.log() from a route. Later, in other routes, it shows them to me; I'm trying to change the GET code and still have the same problem—it's like it can't fetch the image routes but sends the articles to the client while avoiding parts of the code. Then I have similar codes, even one very similar, and it doesn't have that problem; it shows the console.log() that is always on the first line and sends all the data to the client.
are you making sure to use https when calling your railway hosted project?
Here's the link to Railway.
https://appweb-myvdescartables.up.railway.app/catalogo
If you look within the catalog tab, the images don't appear, but if you select from the middle dropdown where it says "seleccionar categoria" and choose "Aluminio" (Only the first two articles have loaded images), you'll see that now the image appears. The code is almost the same; only the MongoDB find() has changed, which in this case only says:
const products = await Product.find({ CATEGORIA: categoriaName})Catalogo - MyV DESCARTABLES
Ventas de articulos descartables por mayor y menor
where are you storing images?
In the same Railway, in a volume.
i take it your paths are wrong and you either arent storing images in the volume or arent reading them out correctly, or both
The paths are correct; at least the data isn't being erased with each deployment. I accessed the volume through the volume file browser, and I could also see the images there. I can access them from the other route. I'm not sure if you managed to change the category to "Aluminum"; only two articles have images.
then the images arent being read out correctly
I managed to solve it by pasting the code into a POST function that only returns the articles.
happy to hear that