Bygg en SaaS med NestJS och Angular: Komplett Guide 2026

Ar du trott pa att spendera veckor pa att bygga autentisering, betalningar och multi-tenancy — innan du ens borjat med din faktiska produkt? 🚀 Du ar inte ensam. Manga nordiska utvecklare startar ambitiosa SaaS-projekt bara for att fastna i infrastrukturarbete som aldrig tar slut.

Jag har varit dar sjalv, och den har guiden ar allt jag onskar att jag hade nar jag borjade. Lat oss bygga nagot riktigt — pa ratt satt, fran borjan.

Varfor NestJS och Angular for SaaS?

Att bygga en SaaS-produkt ar ett av de mest lonsamma projekten en utvecklare kan ta sig an. Men det kraver ratt arkitektur fran borjan. NestJS och Angular ar en kombination som ger dig typsaker full-stack-utveckling, modulart tankande och en kodbas som skalar fran MVP till enterprise.

NestJS ger dig en strukturerad backend med moduler, dependency injection och inbyggt stod for WebSockets, GraphQL och mikroservice-arkitektur. Angular ger dig en komplett frontend-ramverk med stark typning, reaktiv state-hantering och ett moget ekosystem av komponenter.

💡 NestJS eller Next.js? Las var djupgaende jamforelse for att forsta vilken som passar ditt SaaS-projekt bast.

Tillsammans bildar de en full-stack som ar byggd for att halla — inte bara for att lansera snabbt.

Steg 1: Projektstruktur med Nx

Anvand Nx for att hantera din monorepo. Det ger dig delad kod mellan frontend och backend, intelligenta byggen och en tydlig projektstruktur:

npx create-nx-workspace@latest mitt-saas --preset=apps
cd mitt-saas
nx g @nx/nest:application api
nx g @nx/angular:application dashboard
nx g @nx/js:library shared-types

Din mappstruktur blir:

mitt-saas/
  apps/
    api/           # NestJS backend
    dashboard/     # Angular frontend
  libs/
    shared-types/  # Delade TypeScript-typer

Genom att dela typer mellan frontend och backend eliminerar du en hel kategori av buggar — API-kontraktet ar alltid synkroniserat.

Steg 2: Autentisering med JWT

Autentisering ar grunden i varje SaaS. Implementera JWT-baserad inloggning med refresh tokens:

// auth.service.ts (NestJS)
@Injectable()
export class AuthService {
  constructor(
    private usersService: UsersService,
    private jwtService: JwtService,
  ) {}

  async login(email: string, password: string): Promise<TokenPair> {
    const user = await this.usersService.findByEmail(email);
    if (!user || !await bcrypt.compare(password, user.passwordHash)) {
      throw new UnauthorizedException('Felaktiga inloggningsuppgifter');
    }

    return {
      accessToken: this.jwtService.sign(
        { sub: user.id, orgId: user.organizationId, role: user.role },
        { expiresIn: '15m' },
      ),
      refreshToken: this.jwtService.sign(
        { sub: user.id, type: 'refresh' },
        { expiresIn: '7d' },
      ),
    };
  }
}

Pa Angular-sidan, skapa en auth-interceptor som automatiskt bifogar token och hanterar fornyelse:

// auth.interceptor.ts (Angular)
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);
  const token = authService.getAccessToken();

  if (token) {
    req = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` },
    });
  }

  return next(req).pipe(
    catchError((error) => {
      if (error.status === 401) {
        return authService.refreshToken().pipe(
          switchMap(() => next(req)),
        );
      }
      return throwError(() => error);
    }),
  );
};

Lagg aven till tvafaktorautentisering (2FA) for okad sakerhet.

Steg 3: Multi-Tenancy — Grunden for SaaS

Varje SaaS-produkt behover multi-tenancy. Dina kunder delar infrastruktur men deras data maste vara isolerad. Implementera row-level isolation med TypeORM (las var djupgaende guide till multi-tenancy med TypeORM):

// base-tenant.entity.ts
export abstract class BaseTenantEntity {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column()
  @Index()
  tenantId: string;

  @CreateDateColumn()
  createdAt: Date;
}

// tenant-scoped.repository.ts
@Injectable({ scope: Scope.REQUEST })
export class TenantScopedRepository<T extends BaseTenantEntity> {
  constructor(
    private repo: Repository<T>,
    @Inject(REQUEST) private request: Request,
  ) {}

  private get tenantId(): string {
    return this.request['user'].organizationId;
  }

  async findAll(): Promise<T[]> {
    return this.repo.find({ where: { tenantId: this.tenantId } as any });
  }

  async create(data: Partial<T>): Promise<T> {
    return this.repo.save({ ...data, tenantId: this.tenantId } as any);
  }
}

Detta monster sakerstaeller att varje databas-fraga automatiskt filtreras pa ratt organisation. Ingen risk for datalackage mellan tenants.

Steg 4: Rollbaserad Atkomstkontroll (RBAC)

Definiera roller och behorigeter som ar flexibla nog for dina kunders behov. Mer om RBAC-implementation i NestJS:

// roles.enum.ts
export enum Role {
  OWNER = 'owner',
  ADMIN = 'admin',
  MEMBER = 'member',
  VIEWER = 'viewer',
}

// roles.guard.ts
@Injectable()
export class RolesGuard implements CanActivate {
  constructor(private reflector: Reflector) {}

  canActivate(context: ExecutionContext): boolean {
    const requiredRoles = this.reflector.get<Role[]>('roles', context.getHandler());
    if (!requiredRoles) return true;

    const { user } = context.switchToHttp().getRequest();
    return requiredRoles.includes(user.role);
  }
}

// Anvandning i en controller
@Roles(Role.ADMIN, Role.OWNER)
@UseGuards(AuthGuard, RolesGuard)
@Delete(':id')
async removeUser(@Param('id') id: string) {
  return this.usersService.remove(id);
}

Steg 5: Betalningar med Stripe

Integrera Stripe for prenumerationshantering. Skapa checkout-sessioner och hantera webhooks:

// billing.service.ts
@Injectable()
export class BillingService {
  constructor(private stripe: Stripe) {}

  async skapaPrenumeration(orgId: string, priceId: string) {
    const org = await this.orgRepo.findOne({ where: { id: orgId } });

    return this.stripe.checkout.sessions.create({
      customer: org.stripeCustomerId,
      mode: 'subscription',
      line_items: [{ price: priceId, quantity: 1 }],
      success_url: `${this.appUrl}/billing?status=success`,
      cancel_url: `${this.appUrl}/billing?status=avbruten`,
    });
  }
}

Webhooks ar det enda tillforlitliga sattet att spara prenumerationsstatus. Lita aldrig pa redirect-URL:en fran checkout.

🔥 Visste du? Att bygga autentisering, betalningar, multi-tenancy och deployment fran grunden kostar 8-14 veckor och $24,000-$84,000. Las den fullstandiga kostnadsanalysen. Med Cloudrix SaaS Starter ar allt redo dag ett — prova gratis-demon nu! 🎯

Steg 6: Angular Dashboard

Bygg ett responsivt dashboard med Angular Material och standalone-komponenter:

// dashboard-overview.component.ts
@Component({
  selector: 'app-overview',
  standalone: true,
  imports: [MatCardModule, MatGridListModule, ChartComponent],
  template: `
    <mat-grid-list cols="4" rowHeight="120px" gutterSize="16">
      @for (kpi of kpiData(); track kpi.label) {
        <mat-grid-tile>
          <mat-card class="kpi-card">
            <mat-card-header>{{ kpi.label }}</mat-card-header>
            <mat-card-content>
              <span class="kpi-value">{{ kpi.value }}</span>
              <span [class.positive]="kpi.trend > 0" [class.negative]="kpi.trend < 0">
                {{ kpi.trend > 0 ? '+' : '' }}{{ kpi.trend }}%
              </span>
            </mat-card-content>
          </mat-card>
        </mat-grid-tile>
      }
    </mat-grid-list>
  `,
})
export class DashboardOverviewComponent {
  kpiData = signal<KpiData[]>([]);

  constructor(private analyticsService: AnalyticsService) {
    this.analyticsService.getKpis().subscribe((data) => this.kpiData.set(data));
  }
}

Steg 7: Deployment till Produktion

Anvand Docker Compose for lokal utveckling och AWS med Terraform for produktion:

# docker-compose.yml
services:
  api:
    build:
      context: .
      dockerfile: apps/api/Dockerfile
    ports:
      - '3000:3000'
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/saas
    depends_on:
      - db

  dashboard:
    build:
      context: .
      dockerfile: apps/dashboard/Dockerfile
    ports:
      - '4200:80'

  db:
    image: postgres:16
    environment:
      POSTGRES_DB: saas
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Tidsinvestering: Verkligheten

Att bygga allt ovan fran grunden tar tid. Har ar en arlig uppskattning:

Funktion	Tid
Projektstruktur och konfiguration	2 dagar
Autentisering (JWT, OAuth, 2FA)	5 dagar
Multi-tenancy	4 dagar
RBAC	3 dagar
Betalningsintegration	4 dagar
Dashboard-UI	5 dagar
Deployment-pipeline	3 dagar
Totalt	~26 arbetsdagar

Det ar over en manad av heltidsarbete — och da har vi inte raknat med buggar, kantfall eller sakerhetsgranskningar.

Eller: Borja med SaaS Starter 🎯

SaaS Starter innehaller allt ovan — autentisering, multi-tenancy, RBAC, Stripe-betalningar, Angular-dashboard och deployment-konfiguration — fardigbyggt och testat.

Den kostnadsfria Lite-versionen ger dig hela NestJS + Angular-arkitekturen att utvardera. Ingen betalning kravs, ingen tidsbegransning.

Vill du jamfora med andra boilerplates? Las var Cloudrix vs ShipFast vs Supastarter-jamforelse.

Testa live-demon pa demo.cloudrix.io — logga in, skapa organisationer, bjud in anvandare, byt mellan team. Allt du ser ingaar i boilerplaten.

Sluta bygga infrastruktur — bygg din produkt. Klona repot och borja bygga det som gor just din produkt unik. Lite-versionen ar gratis, eller fa Pro-versionen for en engangskostnad pa $249 har. Spara over en manads arbete och fokusera pa det som gor skillnad! 🚀

Nordiska utvecklare bygger fantastiska produkter. Lat inte infrastruktur-arbete bromsa dig.