Remix Railway Template

Bare bones template for deploying a Remix app via Railway. Learn more about Remix Templates

What's in the template?

Railway app deployment with Docker
Github Autodeploys with Railway
Healthcheck endpoint for postgres db
Database ORM with Prisma
Styling with Tailwind
Code formatting with Prettier
Linting with ESLint
Static Types with TypeScript

Setup options

Clone via create-remix cli:

npx create-remix@latest --template https://github.com/ryanmichaelhirst/remix-railway my-app --package-manager pnpm

You can also clone this repository directly, and run the remix.init script manually.

# clone repo
git clone https://github.com/ryanmichaelhirst/remix-railway my-app
cd my-app
# run remix init
npx remix init
git add .
git commit -m "Initialize project"

Development

Install all dependencies
```
pnpm install
```
Note: Replace pnpm with your package manager i.e. npm, yarn, etc
Start the Postgres Database in Docker
```
pnpm docker
```
Note: The pnpm script will complete while Docker sets up the container in the background. Ensure that Docker has finished and your container is running before proceeding.
Initial setup
```
pnpm run setup
```
Note: This will generate the prisma client, apply db migrations and seed your local postgres db
Run the first build
```
pnpm build
```
Start dev server
```
pnpm dev
```
Note: This starts your app in development mode, rebuilding assets on file changes.

Stripe

Payments are powered through Stripe and recorded through a webhook at /app/routes/stripe.event

Note: Because of a bug in linuxbrew, Windows users will need to use Cloudflare Tunnels or a similar alternative to test stripe webhooks locally.

For Mac Users, install the Stripe CLI here, and forward events to your local webhook during testing with

stripe listen --forward-to localhost:3000/stripe/event

Cloudflare Tunnels

You can expose your localhost server (pnpm dev) as a publicaly routable IP address with ssh tunneling

Full instructions here

Install with homebrew

brew install cloudflared

cloudflared tunnel login

Create a tunnel

cloudflared tunnel create <NAME>

Update config file with your creds

cp cloudflare.yaml.sample cloudflare.yaml

Route traffic to tunnel

cloudflared tunnel route dns <UUID or NAME> <hostname>

i.e

cloudflared tunnel route dns 71b2ae8b-6e25-4435-b6c0-1d80490552a1 dev.example.com

Expose the dev server

cloudflared tunnel run <UUID or NAME> // or
pnpm tunnel

If you are using cloudflare this has already been done for you.

If using a different domain registar you will need to follow the guide here

Deployment

Note: Before deploying your app, you will need to first create a postgres service on railway. https://docs.railway.app/guides/postgresql

Railway UI

Production deployments are done via Railway, a platform that will handle all the CI/CD operations for you. Railway will look for a /Dockerfile to build the app. Learn more about Railway Dockerfiles.

Prior to your first deployment, you'll need to do the following:

Create Railway Account

Note: Creating an account via Github is recommended.
Click New Project on Railway to house your app
Click + New -> Database -> Add PostgreSQL to create a service for your postgres db

Note: After the postgres service has been created, copy the value for Variables -> DATABASE_URL
Click Deploy from GitHub repo and select this repo to create a service for your web app
Create an env var DATABASE_URL using the copied value from the postgres service

Note: You can also deploy manually on https://railway.app. You will still need to manually create an env var DATABASE_URL

Railway CLI

Install cli
Authenticate via cli:
```
railway login
```
Create new project
```
railway init
```
Connect to new project
```
railway link
```
Deploy app
```
railway up
```

CI / CD

Railway will automatically deploy any commits that are made to the main branch. You can also Configure the GitHub branch for deployment triggers.

Testing

No testing framework is added via this template.

Type Checking

This project uses TypeScript. To run type checking across the whole project, run pnpm typecheck.

Linting

This project uses ESLint for linting. You can customize in .eslintrc.js.

Formatting

Prettier handles all auto-formatting. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. To format all files manually run pnpm format.