add simple dev.to clone

Author: vmasek

apps/ng-demo-e2e/playwright.config.ts

@@ -1,17 +1,11 @@
 import { defineConfig, devices } from '@playwright/test';
 import { nxE2EPreset } from '@nx/playwright/preset';
-
 import { workspaceRoot } from '@nx/devkit';
+import 'dotenv/config';
 
 // For CI, you may want to set BASE_URL to the deployed application.
 const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */

apps/ng-demo/jest.config.ts

@@ -1,6 +1,6 @@
 export default {
   displayName: 'ng-demo',
-  preset: '../../jest.preset.js',
+  preset: '../../jest.preset.cjs',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/apps/ng-demo',
   transform: {

apps/ng-demo/project.json

@@ -17,37 +17,28 @@
         "tsConfig": "apps/ng-demo/tsconfig.app.json",
         "assets": [
           {
-            "glob": "**/*",
-            "input": "apps/ng-demo/public"
-          }
+            "glob": "favicon.ico",
+            "input": "apps/ng-demo/src/assets/favicon.ico"
+          },
+          "apps/ng-demo/src/assets"
         ],
-        "styles": ["apps/ng-demo/src/styles.css"],
-        "scripts": [],
-        "server": "apps/ng-demo/src/main.server.ts",
-        "prerender": true,
-        "ssr": {
-          "entry": "apps/ng-demo/server.ts"
-        }
+        "styles": [
+          "apps/ng-demo/src/styles.css",
+          "apps/ng-demo/src/styles/article.css",
+          "apps/ng-demo/src/styles/comments.css"
+        ],
+        "scripts": []
       },
       "configurations": {
         "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
+          "namedChunks": true,
+          "sourceMap": true,
           "outputHashing": "all"
         },
         "development": {
           "optimization": false,
           "extractLicenses": false,
+          "namedChunks": true,
           "sourceMap": true
         }
       },

apps/ng-demo/server.ts

@@ -2,7 +2,20 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: '<router-outlet></router-outlet>',
-  styleUrl: './app.component.css',
+  template: `
+    <app-header></app-header>
+    <router-outlet></router-outlet>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        max-width: var(--screen-width);
+        padding: 1rem;
+        margin: auto;
+        box-sizing: border-box;
+      }
+    `,
+  ],
 })
 export class AppComponent {}

apps/ng-demo/src/app/app.component.css

@@ -4,10 +4,16 @@ import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 import { appRoutes } from './app.routes';
+import { HeaderModule } from '../components/header/header.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, HttpClientModule, RouterModule.forRoot(appRoutes)],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    RouterModule.forRoot(appRoutes),
+    HeaderModule,
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

apps/ng-demo/src/app/app.component.ts

@@ -1,3 +1,45 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  {
+    path: 'home',
+    loadChildren: () =>
+      import('../pages/home/home.module').then((m) => m.HomeModule),
+  },
+  {
+    path: 'tag/:tag',
+    pathMatch: 'full',
+    loadChildren: () =>
+      import('../pages/home/home.module').then((m) => m.HomeModule),
+  },
+  {
+    path: 'videos',
+    loadChildren: () =>
+      import('../pages/videos/videos.module').then((m) => m.VideosModule),
+  },
+  {
+    path: 'users/:username',
+    loadChildren: () =>
+      import('../pages/user-profile/user-profile.module').then(
+        (m) => m.UserProfileModule
+      ),
+  },
+  {
+    path: ':user/:slug',
+    loadChildren: () =>
+      import('../pages/article-detail/article-detail.module').then(
+        (m) => m.ArticleDetailModule
+      ),
+  },
+  {
+    path: 'not-found',
+    pathMatch: 'full',
+    loadComponent: () => import('../pages/not-found/not-found.component'),
+  },
+  {
+    path: '**',
+    pathMatch: 'full',
+    redirectTo: 'not-found',
+  },
+];