# Build a Full-Stack Angular Application
# Create a simple todo app with Remult using an Angular frontend
In this tutorial, we are going to create a simple app to manage a task list. We'll use Angular
for the UI, Node.js
+ Express.js
for the API server, and Remult as our full-stack CRUD framework. For deployment to production, we'll use Heroku
and a PostgreSQL
database.
By the end of the tutorial, you should have a basic understanding of Remult and how to use it to accelerate and simplify full stack app development.
Prefer React?
Check out the React tutorial.
# Prerequisites
This tutorial assumes you are familiar with TypeScript
and Angular
.
Before you begin, make sure you have Node.js (opens new window) and git (opens new window) installed.
If Angular CLI is not already installed - then install it.
npm i -g @angular/cli
# Setup for the Tutorial
This tutorial requires setting up an Angular project, an API server project, and a few lines of code to add Remult.
You can either use a starter project to speed things up, or go through the step-by-step setup.
# Option 1: Clone the Starter Project
- Clone the angular-express-starter repository from GitHub and install its dependencies.
git clone https://github.com/remult/angular-express-starter.git remult-angular-todo
cd remult-angular-todo
npm install
- Open your IDE.
- Open a terminal and run the
dev
npm script.
npm run dev
The default Angular app main screen should be displayed.
At this point, our starter project is up and running. We are now ready to move to the next step of the tutorial and start creating the task list app.
# Option 2: Step-by-step Setup
# Create an Angular project
Create the new Angular project.
ng new remult-angular-todo
Note
The ng new
command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
In this tutorial, we'll be using the root folder created by Angular
as the root folder for our server project as well.
cd remult-angular-todo
# Install required packages
We need Express
to serve our app's API, and, of course, Remult
. For development, we'll use ts-node-dev (opens new window) to run the API server, and concurrently (opens new window) to run both API server and the Angular dev server from a single command.
npm i express remult
npm i --save-dev @types/express ts-node-dev concurrently
# Create the API server project
The starter API server TypeScript project contains a single module that initializes Express
, and begins listening for API requests.
Open your IDE.
Add the following entry to the
compilerOptions
section of thetsconfig.json
file to enable the use of Synthetic Default Imports and ES Module Interop in the app.
tsconfig.json
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
- In the root folder, create a TypeScript configuration file
tsconfig.server.json
for the server project.
tsconfig.server.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"emitDecoratorMetadata": true
}
}
Create a
server
folder under thesrc/
folder created by Angular cli.Create an
index.ts
file in thesrc/server/
folder with the following code:
src/server/index.ts
import express from 'express';
const app = express();
app.listen(3002, () => console.log("Server started"));
# Bootstrap Remult in the back-end
Remult is loaded in the back-end as an Express middleware
.
- Create an
api.ts
file in thesrc/server/
folder with the following code:
src/server/api.ts
import { remultExpress } from 'remult/remult-express';
export const api = remultExpress();
- Add the highlighted code lines to register the middleware in the main server module
index.ts
.
src/server/index.ts
import express from 'express';
import { api } from './api';
const app = express();
app.use(api);
app.listen(3002, () => console.log("Server started"));
# Add Angular Modules
In the Angular app we'll be using Angular's HttpClientModule
and FormsModule
.
We'll modify the app.module.ts
file to load Angular's HttpClientModule
and FormsModule
.
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from "@angular/common/http";
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
# Final tweaks
Our full stack starter project is almost ready. Let's complete these final configurations.
# Proxy API requests from Angular DevServer to the API server
The Angular app created in this tutorial is intended to be served from the same domain as its API.
However, for development, the API server will be listening on http://localhost:3002
, while the Angular dev server is served from the default http://localhost:4200
.
We'll use the proxy (opens new window) feature of Angular dev server to divert all calls for http://localhost:4200/api
to our dev API server.
Create a file proxy.conf.json
in the root folder, with the following contents:
proxy.conf.json
{
"/api": {
"target": "http://localhost:3002",
"secure": false
}
}
# Run the app
- Create an
npm
script nameddev
to start the dev API server and the Angular dev server, by adding the following entry to thescripts
section ofpackage.json
.
package.json
"dev": "concurrently -k -n \"API,WEB\" -c \"bgBlue.bold,bgGreen.bold\" \"ts-node-dev -P tsconfig.server.json src/server/\" \"ng serve --proxy-config proxy.conf.json --open\""
- Open a terminal and start the app.
npm run dev
The server is now running and listening on port 3002. ts-node-dev
is watching for file changes and will restart the server when code changes are saved.
The default Angular app main screen should be displayed on the regular port - 4200. Open it in the browser at http://localhost:4200/ (opens new window).
# Setup completed
At this point, our starter project is up and running. We are now ready to move to the next step of the tutorial and start creating the task list app.
Entities →