Need help building and deploying monorepo on railway

materwelondhruv
PRO

8 months 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.json

0 Replies

materwelondhruv
PRO

8 months ago

Project ID:6895348a-16e1-4f9a-b3ad-f8846dc4a9db


materwelondhruv
PRO

8 months ago

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"]

8 months ago

send me the nginx config please


materwelondhruv
PRO

8 months ago

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;
        }
    }
}

8 months ago

any reason you are proxying requests? vs just having the frontend call the backends domain?


materwelondhruv
PRO

8 months ago

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.


materwelondhruv
PRO

8 months ago

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)


8 months ago

what's the frontend written in?


materwelondhruv
PRO

8 months ago

frontend vite+react, typescript
backend typescript express


8 months 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


materwelondhruv
PRO

8 months ago

the url for the backend is $APIURL. I'll remove all proxy? but where to I set the APIURL then? It's the one that railway provides, in our case, backend-newrr.railway.app or smth


8 months ago

please see this message for guidance


materwelondhruv
PRO

8 months ago

okay, let me update it and send it over <:thumbsup:1054061652967956490>


materwelondhruv
PRO

8 months ago

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


materwelondhruv
PRO

8 months ago

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.


8 months ago

show me some sample code from your frontend that would make an API request to the backend


materwelondhruv
PRO

8 months ago

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();

8 months ago

show me how API_URL is defined please


materwelondhruv
PRO

8 months ago

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
}

8 months ago

is this frontend code?


materwelondhruv
PRO

8 months ago

yeah, it's a file in the Frontend.


8 months ago

why is a file in the frontend referencing the mongo uri?


materwelondhruv
PRO

8 months ago

i'm supposed to delete that line <:D_lol:801460675276046357>

frontend will only have API_URL


materwelondhruv
PRO

8 months ago

and maybe port, depends on the person writing the frontend


materwelondhruv
PRO

8 months ago

i only work on the backend


8 months ago

lol why was it ever there?


materwelondhruv
PRO

8 months ago

cuz copied this file from the Backend


8 months ago

fair enough


8 months ago

you are missing the needed variables in your Dockerfiles


materwelondhruv
PRO

8 months ago

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


8 months ago

we'll get to that, remember, low hanging issues first


materwelondhruv
PRO

8 months ago

hm. ye


8 months ago


materwelondhruv
PRO

8 months ago

i made the nginx changes as you suggested


materwelondhruv
PRO

8 months 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?


materwelondhruv
PRO

8 months ago

you see how confused I am lmao


materwelondhruv
PRO

8 months ago

and thank you for bearing with me


8 months ago

you dont need to move anything, please dont go jumping to conclusions here, remember low hanging issues first


8 months ago

me dumping everything you need to do at once is not helpful, so its going to be one thing at a time


materwelondhruv
PRO

8 months ago

so for now, what do you need me to add to the Backend's Dockerfile?

env for the service?


8 months ago

as the docs say, you need to add ARG lines


materwelondhruv
PRO

8 months ago

# Stage 1: Build the Backend
FROM node:22-alpine AS builder

ARG RAILWAY_ENVIRONMENT=staging
ARG RAILWAY_SERVICE_NAME=backend
RUN echo $RAILWAY_SERVICE_NAME

8 months ago

you dont need to ping reply me btw


materwelondhruv
PRO

8 months ago

will keep that in mind for future messages <:thumbsup:1054061652967956490>


8 months ago

  1. dont specify the value

  2. you dont need to echo it, that was purely for demonstration

  3. i'm sure your backend needs more than those two variables

  4. set the variables in the service variables


materwelondhruv
PRO

8 months ago

ah wait nvm. got it. I'm supposed to set them on the dashboard. brb


8 months ago

that too


materwelondhruv
PRO

8 months ago

that too ah <:sodead:854174387556450314> what am I missing. okay lemmi do this first then will show u


8 months ago

updated


materwelondhruv
PRO

8 months ago

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.

1294776223427330300


8 months ago

lets see the backend Dockerfile


materwelondhruv
PRO

8 months ago

sec


materwelondhruv
PRO

8 months ago

# 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"]

materwelondhruv
PRO

8 months ago

I assume I have to update the Backend stuff I'm using below? instead of hardcoding it?


8 months ago

are you sure you dont need to use some other variables during build?


materwelondhruv
PRO

8 months ago

nop


materwelondhruv
PRO

8 months ago

nothing that relates to my backend atleast


8 months ago

how do you know you dont need environment variables during build


materwelondhruv
PRO

8 months ago

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


8 months ago

sounds good, just making sure


8 months ago

show me the frontend service variables in railway please


materwelondhruv
PRO

8 months ago

sec


materwelondhruv
PRO

8 months ago

1294778819869278200


8 months ago

cool, show me the dockerfile please


materwelondhruv
PRO

8 months ago

it's here

apologies late response


8 months ago

i know, but it needed to be updated so i asked to see it after you have made the changes


materwelondhruv
PRO

8 months ago


8 months ago

please read this docs section


materwelondhruv
PRO

8 months ago

updated Frontend/Dockerfile and added

RAILWAY_DOCKERFILE_PATH=/Frontend/Dockerfile

updated Backend/Dockerfile and added

RAILWAY_DOCKERFILE_PATH=/Backend/Dockerfile

materwelondhruv
PRO

8 months ago

ENV*


materwelondhruv
PRO

8 months ago

ENV before both


8 months ago

again, please do not try to skip ahead


materwelondhruv
PRO

8 months ago

wait but this is part of the variables at build time guide


materwelondhruv
PRO

8 months ago

the first instruction


8 months ago

I linked a specific header, not the entire page


materwelondhruv
PRO

8 months ago

I already completed that stuff. I only need service and environment at build time


8 months ago

for your frontend you need more than that


materwelondhruv
PRO

8 months ago

uhhhh.


materwelondhruv
PRO

8 months ago

the API_URL? that's not needed at build time


8 months ago

yes it is, this is a static site


materwelondhruv
PRO

8 months ago

API_URL is from the backend though


materwelondhruv
PRO

8 months ago

and I'll only need that when someone interacts with the frontend


8 months 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.


materwelondhruv
PRO

8 months ago

# 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

materwelondhruv
PRO

8 months ago

looks like this now


8 months ago

does your frontend even use those railway specific environment variables?


materwelondhruv
PRO

8 months ago

it'll need it for the build


materwelondhruv
PRO

8 months ago

because it's a monorepo


8 months ago

how so


materwelondhruv
PRO

8 months ago

oh well, i shouldnt step ahead.


materwelondhruv
PRO

8 months ago

It doesnt need it in the current state


8 months ago

how is vite going to access API_URL if you don't have the correct prefix?


materwelondhruv
PRO

8 months ago

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.


materwelondhruv
PRO

8 months ago

yeah, it doesnt


materwelondhruv
PRO

8 months ago

there are no backend enpoints that send anything to the website during build


materwelondhruv
PRO

8 months ago

it's all frontend


8 months ago

it doesn't need to be during build


8 months ago

it's a static site done with vite, correct?


materwelondhruv
PRO

8 months ago

yes it's static during build time


materwelondhruv
PRO

8 months ago

oh btw, got perms for github and connected it to the railway project.


materwelondhruv
PRO

8 months ago

well, service.


materwelondhruv
PRO

8 months ago

have not deployed


materwelondhruv
PRO

8 months ago

it needs fixing <:D_lol:801460675276046357>


materwelondhruv
PRO

8 months ago

i should probs test locally with docker first


8 months ago

show me the frontend Dockerfile please


materwelondhruv
PRO

8 months ago

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"]

8 months ago

vite will only load variables that are prefixed with VITE_


materwelondhruv
PRO

8 months ago

decided to use two repos instead of one we won the hackathon tho!


materwelondhruv
PRO

8 months ago

thanks for trying to help Brody <:smil:966279319787819018>