Deploy an Angular App

Angular is a JavaScript web framework that empowers developers to build fast and reliable applications. It is designed to work at any scale, keep large teams productive and is proven in some of Google's largest web apps such as Google fonts and Google Cloud.

This guide covers how to deploy an Angular app to Railway in four ways:

One-click deploy from a template
From a GitHub repository
Using the CLI
Using a Dockerfile

Now, let's create an Angular app!

Create an Angular App

Note: If you already have an Angular app locally or on GitHub, you can skip this step and go straight to the Deploy Angular App on Railway.

To create a new Angular app, ensure that you have Node and Angular CLI installed on your machine.

Run the following command in your terminal to create a new Angular app:

ng new gratitudeapp

You'll be presented with some config options in the prompts for your project.

Select CSS
Select Yes for enabling Server-Side Rendering (SSR) and Static Site Generation (SSG)
Select Yes for enabling Server Routing and App Engine APIs (Developer Preview)

Run the Angular App locally

Next, cd into the directory and run the app.

npm start

Open your browser and go to http://localhost:4200 to see your app.

Modify Start Script

Before deploying, we need to update the package.json file.

Angular builds the project into the dist directory. For server-side rendered apps, the server starts with the command: node dist/gratitudeapp/server/server.mjs as defined in the scripts section below:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:gratitudeapp": "node dist/gratitudeapp/server/server.mjs"
  },

The development server starts with npm start.
The production server runs with npm run serve:ssr:gratitudeapp.

Since Railway relies on the build and start scripts to automatically build and launch applications, we need to update the start script to ensure it runs the production server correctly.

Your scripts section should look like this:

...
"scripts": {
    "ng": "ng",
    "dev": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "start": "node dist/gratitudeapp/server/server.mjs"
  },
...

Now, we are good to go!

Deploy the Angular App to Railway

Railway offers multiple ways to deploy your Angular app, depending on your setup and preference.

One-Click Deploy from a Template

If you’re looking for the fastest way to get started, the one-click deploy option is ideal.

Click the button below to begin:

We highly recommend that you eject from the template after deployment to create a copy of the repo on your GitHub account.

Note: You can also choose from a variety of Angular app templates created by the community.

Deploy from the CLI

Install the Railway CLI:
- Install the CLI and authenticate it using your Railway account.
Initialize a Railway Project:
- Run the command below in your Angular app directory.
```
railway init
```
- Follow the prompts to name your project.
- After the project is created, click the provided link to view it in your browser.
Deploy the Application:
- Use the command below to deploy your app:
```
railway up
```
- This command will scan, compress and upload your app's files to Railway. You’ll see real-time deployment logs in your terminal.
- Once the deployment completes, go to View logs to check if the service is running successfully.
Set Up a Public URL:
- Navigate to the Networking section under the Settings tab of your new service.
- Click Generate Domain to create a public URL for your app.

screenshot of the deployed Angular service

Deploy from a GitHub Repo

To deploy an Angular app to Railway directly from GitHub, follow the steps below:

Create a New Project on Railway:
- Go to Railway to create a new project.
Deploy from GitHub:
- Select Deploy from GitHub repo and choose your repository.
  - If your Railway account isn’t linked to GitHub yet, you’ll be prompted to do so.
Deploy the App:
- Click Deploy to start the deployment process.
- Once the deployed, a Railway service will be created for your app, but it won’t be publicly accessible by default.
Verify the Deployment:
- Once the deployment completes, go to View logs to check if the server is running successfully.
Set Up a Public URL:
- Navigate to the Networking section under the Settings tab of your new service.
- Click Generate Domain to create a public URL for your app.

Use a Dockerfile

Create a Dockerfile in the gratitudeapp or Angular app's root directory.

Add the content below to the Dockerfile:

# Use the Node alpine official image
# https://hub.docker.com/_/node
FROM node:lts-alpine

# Create and change to the app directory.
WORKDIR /app

# Copy the files to the container image
COPY package*.json ./

# Install packages
RUN npm ci

# Copy local code to the container image.
COPY . ./

# Build the app.
RUN npm run build

# Serve the app
CMD ["npm", "run", "start"]

Either deploy via the CLI or from GitHub.

Railway automatically detects the Dockerfile, and uses it to build and deploy the app.

Note: Railway supports also deployment from public and private Docker images.

This guide covers the main deployment options on Railway. Choose the approach that suits your setup, and start deploying your Angular apps seamlessly!

Next Steps

Explore these resources to learn how you can maximize your experience with Railway:

Django

React

Edit this file on GitHub

Overview

Guides

Tutorials

Reference

Maturity

Migration

Community