Deployment
Let's deploy the todo app to railway.app.
Prepare for Production
In this tutorial, we'll deploy both the Angular app and the API server as one server-side app, and redirect all non-API requests to return the Angular app.
In addition, to follow a few basic production best practices, we'll use compression middleware to improve performance and helmet middleware for security
- Install
compression
andhelmet
.
npm i compression helmet
npm i @types/compression --save-dev
- Add the highlighted code lines to
src/server/index.ts
, and modify theapp.listen
function'sport
argument to prefer a port number provided by the production host'sPORT
environment variable.
// src/server/index.ts
import express from "express"
import { api } from "./api"
import session from "cookie-session"
import { auth } from "./auth"
import helmet from "helmet"
import compression from "compression"
import path from "path"
const app = express()
app.use(
session({
secret: process.env["SESSION_SECRET"] || "my secret"
})
)
app.use(
helmet({
contentSecurityPolicy: {
directives: {
'script-src-attr': ["'unsafe-inline'"],
},
},
})
)
app.use(compression())
app.use(auth)
app.use(api)
app.use(express.static(path.join(__dirname, '../remult-angular-todo/browser')));
app.get('/*', (req, res) => {
res.sendFile(
path.join(__dirname, '../remult-angular-todo/browser', 'index.html')
);
});
app.listen(process.env["PORT"] || 3002, () => console.log("Server started"))
Angular versions <17
If you're using angular version 16 or less, the result path is: '../remult-angular-todo
- adjust both lines in the src/server/index.ts
accordingly
Modify the highlighted code in the api server module to prefer a
connectionString
provided by the production host'sDATABASE_URL
environment variable.ts// src/server/api.ts //... const DATABASE_URL = process.env["DATABASE_URL"]; export const api = remultExpress({ dataProvider: DATABASE_URL ? createPostgresDataProvider({ connectionString: DATABASE_URL }) : undefined, //... })
Note
In order to connect to a local PostgresDB, add DATABASE_URL
to an .env file, or simply replace process.env["DATABASE_URL"]
with your connectionString
.
If no DATABASE_URL
has found, it'll fallback to our local JSON files.
- In the root folder, create a TypeScript configuration file
tsconfig.server.json
for the build of the server project using TypeScript.
// tsconfig.server.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"noEmit": false,
"outDir": "dist",
"skipLibCheck": true,
"rootDir": "src"
},
"include": ["src/server/index.ts"]
}
- Modify the project's
build
npm script to additionally transpile the API server's TypeScript code to JavaScript (usingtsc
).
// package.json
"build": "ng build && tsc -p tsconfig.server.json"
- Modify the project's
start
npm script to start the production Node.js server.
// package.json
"start": "node dist/server/"
The todo app is now ready for deployment to production.
Test Locally
To test the application locally run
npm run build
npm run start
Now navigate to http://localhost:3002 and test the application locally
Deploy to Railway
In order to deploy the todo app to railway you'll need a railway
account. You'll also need Railway CLI installed, and you'll need to login to railway from the cli, using railway login
.
Click enter multiple times to answer all its questions with the default answer
Create a Railway
project
.From the terminal in your project folder run:
shrailway init
Select
Empty Project
Set a project name.
Once it's done add a database by running the following command:
shrailway add
Select
postgressql
as the database.Once that's done run the following command to upload the project to railway:
shrailway up
got to the
railway
project's site and click on the projectSwitch to the
variables
tabClick on
+ New Variable
, and in theVARIABLE_NAME
clickAdd Reference
and selectDATABASE_URL
Add another variable called
SESSION_SECRET
and set it to a random string, you can use an online UUID generatorSwitch to the
settings
tabUnder
Environment
click onGenerate Domain
Click on the newly generated url to open the app in the browser and you'll see the app live in production. (it may take a few minutes to go live)
Note
If you run into trouble deploying the app to Railway, try using Railway's documentation.
That's it - our application is deployed to production, play with it and enjoy.
Love Remult? Give our repo a star.⭐