2 years ago
For some reason I can't connect the github repo. So I tried using the Railway CLI. But the problem with that is it needs me to link. I tried the railway.toml file but I don't think I have the syntax down. So for now, here's my project structure with monorepo, and some context.
Frontend depends on the API dir, for important methods to interact with the Backend. So I need to have the full project on there. But on Railway, I have two services.
├── API
│ ├── Types
│ ├── package.json
│ ├── source
│ │ ├── BaseMethods.ts
│ │ ├── GetMethods.ts
│ │ └── index.ts
│ └── tsconfig.json
├── Backend
│ ├── Dockerfile
│ ├── database
│ │ ├── Database.ts
│ │ ├── Middleware
│ │ └── Models
│ ├── index.ts
│ ├── library
│ │ ├── Decorators
│ │ │ ├── Catchable.ts
│ │ │ ├── Checkable.ts
│ │ │ └── DBCatchable.ts
│ │ ├── Errors
│ │ │ ├── Database.ts
│ │ │ ├── Email.ts
│ │ │ └── Params.ts
│ │ ├── Globals
│ │ │ ├── Assets.ts
│ │ │ └── Globals.ts
│ │ ├── Interfaces
│ │ │ ├── Errors.ts
│ │ │ ├── HandlerController.ts
│ │ │ └── RequestRouter.ts
│ │ ├── Types.ts
│ │ └── Utilities
│ │ ├── ErrorUtils.ts
│ │ ├── LoggerUtils.ts
│ │ ├── MiscUtils.ts
│ │ ├── NumberUtils.ts
│ │ └── StringUtils.ts
│ ├── nodemon.json
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── server
│ │ ├── Routes
│ │ │ ├── Get.ts
│ │ │ ├── Post.ts
│ │ │ └── Put.ts
│ │ ├── Server.ts
│ │ └── ValidRoutes.ts
│ ├── source
│ │ ├── Controllers
│ │ │ ├── GetController.ts
│ │ │ ├── PostController.ts
│ │ │ └── PutController.ts
│ │ ├── Handlers
│ │ │ ├── GetHandlers
│ │ │ │ └── HelloWorld.ts
│ │ │ ├── PostHandlers
│ │ │ └── PutHandlers
│ │ └── Middleware
│ │ └── Email.ts
│ ├── start-watch.ts
│ └── tsconfig.json
├── Frontend
│ ├── Dockerfile
│ ├── README.md
│ ├── entrypoint.sh
│ ├── eslint.config.js
│ ├── index.html
│ ├── nginx.conf.template
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── postcss.config.js
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.tsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tailwind.config.js
│ ├── tsconfig.app.json
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
├── LICENSE
├── README.md
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── tsconfig.json109 Replies
Backend/Dockerfile
# Stage 1: Build the Backend
FROM node:22-alpine AS builder
# Set working directory
WORKDIR /app
# Install pnpm globally
RUN npm install -g pnpm
# Copy root package.json, pnpm-workspace.yaml, and pnpm-lock.yaml
COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
# Install all dependencies
RUN pnpm install
# Copy all workspace packages (includes API, Backend, Frontend)
COPY . .
# Build the Backend
RUN pnpm --filter backend run build
# Stage 2: Create the Production Image
FROM node:22-alpine
# Set working directory
WORKDIR /app
# Install pnpm globally
RUN npm install -g pnpm
# Copy root package.json and pnpm-lock.yaml
COPY package.json pnpm-lock.yaml ./
# Install production dependencies for Backend
RUN pnpm install --prod --filter backend
# Copy the built Backend code from the builder stage
COPY --from=builder /app/Backend/dist ./Backend/dist
# Expose the port that the app runs on
EXPOSE 4000
# Start the application
CMD ["pnpm", "--filter", "backend", "start"]Frontend/Dockerfile
# Stage 1: Build the Frontend
FROM node:22-alpine AS builder
# Set working directory
WORKDIR /app
# Install pnpm globally
RUN npm install -g pnpm
# Copy root package.json, pnpm-workspace.yaml, and pnpm-lock.yaml
COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
# Install all dependencies
RUN pnpm install
# Copy all workspace packages (includes API, Backend, Frontend)
COPY . .
# Build the Frontend
RUN pnpm --filter frontend run build
# Stage 2: Serve with Nginx
FROM nginx:alpine
# Install gettext for envsubst (environment variable substitution)
RUN apk add --no-cache gettext
# Copy custom Nginx configuration template
COPY Frontend/nginx.conf.template /etc/nginx/nginx.conf.template
# Copy entrypoint script
COPY Frontend/entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
# Remove default Nginx static assets
RUN rm -rf /usr/share/nginx/html/*
# Copy built Frontend code from builder
COPY --from=builder /app/Frontend/dist /usr/share/nginx/html
# Expose port 80
EXPOSE 80
# Set entrypoint to handle dynamic configuration and start Nginx
ENTRYPOINT ["/entrypoint.sh"]2 years ago
send me the nginx config please
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# Cache control for static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000";
}
# Proxy API requests to Backend
location /api/ {
proxy_pass $API_URL;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
}2 years ago
any reason you are proxying requests? vs just having the frontend call the backends domain?
it can't find the Dockerfile most of the times. And I'm reluctant to specify a path because then it'll ignore the API folder? I'm not sure.
I don't understand nginx, unfortunately. This nginx code was written by someone else in the team, and I don't think they understand it either. We're new to complex full stack deployments. Would love to get some guidance (we're in a hackathon <:sodead:854174387556450314> time's running out)
2 years ago
what's the frontend written in?
2 years ago
let's fix the lower hanging issues first, remove the proxy stuff and change your frontend code to use an environment variable for the backend host that it will make fetch requests to
the url for the backend is $API_URL. I'll remove all proxy? but where to I set the API_URL then? It's the one that railway provides, in our case, backend-newrr.railway.app or smth
2 years ago
please see this message for guidance
okay, let me update it and send it over <:thumbsup:1054061652967956490>
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y;
add_header Cache-Control "public, max-age=31536000";
}
}
}Also, do lmk if you prefer that I don't ping you in replies
I didn't really understand using the API url in nginx in the first place. I'm already using that in the frontend via a static class that loads the env and added that in CORS as well.
2 years ago
show me some sample code from your frontend that would make an API request to the backend
import { BaseMethods } from './BaseMethods';
import axios from 'axios';
export class GetMethods extends BaseMethods {
constructor(baseUrl: string) {
super(baseUrl);
}
public async checkHealth(): Promise {
const response = await axios.get(`${this.baseUrl}/health`);
return response.data;
}
}So frontend would create an instance of this class like so
const GetApi = new GetMethods(Globals.API_URL);then use the methods
await GetApi.checkHealth();2 years ago
show me how API_URL is defined please
This works, tested locally. Endpoint also works, tested via Postman.
import dotenv from 'dotenv';
export class Globals {
public static ENV = process.env.NODE_ENV || 'development';
private constructor() {}
static {
Globals.initialize();
}
private static initialize() {
dotenv.config({ path: `.env.${Globals.ENV}` });
}
// CONSTANTS
// PRIVATE CONSTANTS | VARIABLES
public static readonly DB_NAME = process.env.DB_NAME || '';
public static readonly MONGO_URI = process.env.MONGODB_URI || '';
public static readonly V_EMAIL = process.env.V_EMAIL || '';
public static readonly V_PASSWORD = process.env.V_PASSWORD || '';
public static readonly PORT = process.env.PORT || 3000;
public static readonly API_URL = process.env.API_URL || '';
// VARIABLE ACCESSORS BASED ON ENVIRONMENT
}2 years ago
is this frontend code?
2 years ago
why is a file in the frontend referencing the mongo uri?
i'm supposed to delete that line <:D_lol:801460675276046357>
frontend will only have API_URL
2 years ago
lol why was it ever there?
2 years ago
fair enough
2 years ago
you are missing the needed variables in your Dockerfiles
but Railway isn't detecting the dockerfile at all.
And since we can't connect via github (because we don't own the project, it's part of the hackathon group), we don't know how to get it up and running
2 years ago
we'll get to that, remember, low hanging issues first
2 years ago
oh wait. ooo.
So instead of having the Dockerfiles inside the dirs of Frontend and Backend, I keep it in root dir and add these build time variables in the Dockerfile?
so Dockerfile.frontend
Dockerfile.backend in the root dir?
This is because I need it to use the full monorepo each time, because of that API directory (which is a package, using pnpm workspace)
If so, I know I can refernce the correct Dockerfile via railway env variables. But what about the service? I can't connect to github so I have to use the CLI. But with the CLI, it needs me to link a service, either backend or frontend. Soooo, yeah.
I'm not sure what Dockerfile you need me to update. Best to first get the Backend to work. So I add both Dockerfile and service? But what's the point of adding a Dockerfile env in the Dockerfile itself?
2 years ago
you dont need to move anything, please dont go jumping to conclusions here, remember low hanging issues first
2 years ago
me dumping everything you need to do at once is not helpful, so its going to be one thing at a time
so for now, what do you need me to add to the Backend's Dockerfile?
env for the service?
2 years ago
as the docs say, you need to add ARG lines
# Stage 1: Build the Backend
FROM node:22-alpine AS builder
ARG RAILWAY_ENVIRONMENT=staging
ARG RAILWAY_SERVICE_NAME=backend
RUN echo $RAILWAY_SERVICE_NAME2 years ago
you dont need to ping reply me btw
will keep that in mind for future messages <:thumbsup:1054061652967956490>
2 years ago
- dont specify the value
- you dont need to echo it, that was purely for demonstration
- i'm sure your backend needs more than those two variables
- set the variables in the service variables
2 years ago
that too
that too ah <:sodead:854174387556450314> what am I missing. okay lemmi do this first then will show u
2 years ago
updated
I think I understand what the args are now.
and railway already has the environment name and service name. So I don't need to create them again on the dash.
And no, I don't need any more args during build for the backend. For the other variables, I already created them on the backend.
2 years ago
lets see the backend Dockerfile
# Stage 1: Build the Backend
FROM node:22-alpine AS builder
ARG RAILWAY_ENVIRONMENT
ARG RAILWAY_SERVICE_NAME
# Set working directory
WORKDIR /app
# Install pnpm globally
RUN npm install -g pnpm
# Copy root package.json, pnpm-workspace.yaml, and pnpm-lock.yaml
COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
# Install all dependencies
RUN pnpm install
# Copy all workspace packages (includes API, Backend, Frontend)
COPY . .
# Build the Backend
RUN pnpm --filter backend run build
# Stage 2: Create the Production Image
FROM node:22-alpine
# Set working directory
WORKDIR /app
# Install pnpm globally
RUN npm install -g pnpm
# Copy root package.json and pnpm-lock.yaml
COPY package.json pnpm-lock.yaml ./
# Install production dependencies for Backend
RUN pnpm install --prod --filter backend
# Copy the built Backend code from the builder stage
COPY --from=builder /app/Backend/dist ./Backend/dist
# Expose the port that the app runs on
EXPOSE 4000
# Start the application
CMD ["pnpm", "--filter", "backend", "start"]I assume I have to update the Backend stuff I'm using below? instead of hardcoding it?
2 years ago
are you sure you dont need to use some other variables during build?
2 years ago
how do you know you dont need environment variables during build
because I've made a similar backend for a separate project before (was less complex), but I didn't need those other variables during build time. I'm not "setting up" anything during build time, except building the Backend code. the start command does everything else and my ENVs are only ever referenced by the code on requests
2 years ago
sounds good, just making sure
2 years ago
show me the frontend service variables in railway please
2 years ago
cool, show me the dockerfile please
2 years ago
i know, but it needed to be updated so i asked to see it after you have made the changes
2 years ago
please read this docs section
updated Frontend/Dockerfile and added
RAILWAY_DOCKERFILE_PATH=/Frontend/Dockerfileupdated Backend/Dockerfile and added
RAILWAY_DOCKERFILE_PATH=/Backend/Dockerfile2 years ago
again, please do not try to skip ahead
2 years ago
I linked a specific header, not the entire page
I already completed that stuff. I only need service and environment at build time
2 years ago
for your frontend you need more than that
2 years ago
yes it is, this is a static site
2 years ago
the frontend needs that variable to know what url to make requests to.
the frontend is a static site.
thus that variable is needed during build.
# Stage 1: Build the Frontend
FROM node:22-alpine AS builder
ARG API_URL
ARG RAILWAY_ENVIRONMENT
ARG RAILWAY_SERVICE_NAME
# Set working directory
WORKDIR /app2 years ago
does your frontend even use those railway specific environment variables?
2 years ago
how so
2 years ago
how is vite going to access API_URL if you don't have the correct prefix?
the website isn't fetching any data from the backend when it starts btw. atleast right now. So API_URL isn't needed either, really.
there are no backend enpoints that send anything to the website during build
2 years ago
it doesn't need to be during build
2 years ago
it's a static site done with vite, correct?
oh btw, got perms for github and connected it to the railway project.
2 years ago
show me the frontend Dockerfile please
back finally
# Stage 1: Build the Frontend
FROM node:22-alpine AS builder
ARG API_URL
ARG RAILWAY_ENVIRONMENT
ARG RAILWAY_SERVICE_NAME
# Set working directory
WORKDIR /app
# Install pnpm globally
RUN npm install -g pnpm
# Copy root package.json, pnpm-workspace.yaml, and pnpm-lock.yaml
COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
# Install all dependencies
RUN pnpm install
# Copy all workspace packages (includes API, Backend, Frontend)
COPY . .
# Build the Frontend
RUN pnpm --filter frontend run build
# Stage 2: Serve with Nginx
FROM nginx:alpine
# Install gettext for envsubst (environment variable substitution)
RUN apk add --no-cache gettext
# Copy custom Nginx configuration template
COPY Frontend/nginx.conf.template /etc/nginx/nginx.conf.template
# Copy entrypoint script
COPY Frontend/entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
# Remove default Nginx static assets
RUN rm -rf /usr/share/nginx/html/*
# Copy built Frontend code from builder
COPY --from=builder /app/Frontend/dist /usr/share/nginx/html
# Expose port 80
EXPOSE 80
# Set entrypoint to handle dynamic configuration and start Nginx
ENTRYPOINT ["/entrypoint.sh"]2 years ago
vite will only load variables that are prefixed with VITE_