Skip to content

Move to new angular build executor #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 24, 2024
Merged

Move to new angular build executor #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0528ba4
fix: build
Sep 24, 2024
2f6ee3e
feat: move to new application executor
Sep 24, 2024
59e71fd
feat: config vercel
Sep 24, 2024
dca6569
feat: update nx
Sep 24, 2024
940bcc0
fix: update vercel config
Sep 24, 2024
5ac5554
fix: add env variable in vercel config
Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@

.angular

/.nx/cache
/.nx/cache
/.nx/workspace-data
3 changes: 0 additions & 3 deletions api/index.js
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions api/index.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { app } from '../dist/docs-static/server/server.mjs';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider using a more robust import path

The current import statement uses a relative path that points to a compiled version of the server. This approach might be brittle if the project structure changes.

Consider using a more robust import method, such as aliasing the import path in your build configuration or using a module resolution plugin. This would make the import less dependent on the exact file structure.

For example, you could use a path alias:

import { app } from '@server/server.mjs';

And configure the alias in your build tool or TypeScript configuration.


export default app();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Reconsider immediate invocation of app()

The current implementation immediately invokes the app() function and exports its result. This approach has potential drawbacks:

  1. It may cause side effects upon import, which can be unexpected.
  2. There's no error handling around the app() invocation.
  3. It doesn't allow for any configuration or setup before starting the server.

Consider exporting the app function itself instead of its invocation result. This would allow more flexibility in how and when the server is started. For example:

import { app } from '../dist/docs-static/server/server.mjs';

export default app;

Then, in the file where you actually want to start the server:

import app from './api/index.mjs';

try {
  const server = app();
  // Additional setup or logging can be done here
} catch (error) {
  console.error('Failed to start the server:', error);
}

This approach provides better control over the server startup process and allows for proper error handling.

81 changes: 17 additions & 64 deletions apps/docs/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,25 @@
"tags": [],
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
"outputs": ["{options.outputPath}"],
"executor": "@angular-devkit/build-angular:application",
"outputs": ["{options.outputPath.base}"],
"options": {
"outputPath": "dist/docs-static/browser",
"outputPath": {
"base": "dist/docs-static"
},
"index": "apps/docs/src/index.html",
"main": "apps/docs/src/main.ts",
"polyfills": "zone.js",
"polyfills": ["zone.js"],
"tsConfig": "apps/docs/tsconfig.app.json",
"inlineStyleLanguage": "css",
"assets": ["apps/docs/src/assets"],
"styles": ["apps/docs/src/styles.css"],
"scripts": []
"scripts": [],
"browser": "apps/docs/src/main.ts",
"server": "apps/docs/src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "apps/docs/server.ts"
}
},
"configurations": {
"production": {
Expand All @@ -43,80 +50,26 @@
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"server": {
"dependsOn": ["build"],
"executor": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/docs-static/server",
"main": "apps/docs/server.ts",
"tsConfig": "apps/docs/tsconfig.server.json",
"inlineStyleLanguage": "css"
},
"serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "apps/docs/src/environments/environment.ts",
"with": "apps/docs/src/environments/environment.prod.ts"
}
]
"buildTarget": "docs:build:production"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"sourceMap": true,
"extractLicenses": false,
"vendorChunk": true
"buildTarget": "docs:build:development"
}
},
"defaultConfiguration": "production"
},
"prerender": {
"executor": "@angular-devkit/build-angular:prerender",
"options": {
"routes": ["/"]
},
"configurations": {
"development": {
"browserTarget": "docs:build:development",
"serverTarget": "docs:server:development"
},
"production": {
"browserTarget": "docs:build:production",
"serverTarget": "docs:server:production"
}
},
"defaultConfiguration": "production"
},
"start": {
"executor": "@angular-devkit/build-angular:ssr-dev-server",
"options": {
"browserTarget": "docs:build",
"serverTarget": "docs:server"
},
"configurations": {
"production": {
"browserTarget": "docs:build:production",
"serverTarget": "docs:server:production"
},
"development": {
"browserTarget": "docs:build:development",
"serverTarget": "docs:server:development"
}
},
"defaultConfiguration": "development"
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/apps/docs"],
Expand Down
38 changes: 13 additions & 25 deletions apps/docs/server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,45 @@
import 'zone.js/node';

import bootstrap from './src/main.server';

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import * as express from 'express';
import express from 'express';

import { existsSync } from 'node:fs';
import { join } from 'node:path';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/docs-static/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html'))
? join(distFolder, 'index.original.html')
: join(distFolder, 'index.html');
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

const commonEngine = new CommonEngine();

server.set('view engine', 'html');
server.set('views', distFolder);
server.set('views', browserDistFolder);

// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get(
'*.*',
express.static(distFolder, {
'**',
express.static(browserDistFolder, {
maxAge: '1y',
index: 'index.html',
}),
);

// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
server.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;

commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: distFolder,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
Expand All @@ -61,14 +59,4 @@ function run(): void {
});
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = (mainModule && mainModule.filename) || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}

export default bootstrap;
run();
1 change: 1 addition & 0 deletions apps/docs/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/unbound-method */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

⚠️ Potential issue

Remove the global ESLint disable directive for @typescript-eslint/unbound-method

Disabling the @typescript-eslint/unbound-method rule globally can conceal potential issues across the codebase. Instead, consider addressing the specific instances where this rule is triggered or configure the rule in your ESLint settings to better suit the project's needs.

Analysis chain

Consider removing ESLint disable directives

A new ESLint disable directive has been added for the @typescript-eslint/unbound-method rule. While this may temporarily solve a linting issue, it's generally not recommended to disable ESLint rules globally in a configuration file.

Consider addressing the underlying issues that trigger these ESLint warnings instead of disabling them. If these rules are consistently problematic for your project, it might be better to configure them in your ESLint configuration file rather than using inline disable comments.

To help identify where these ESLint rules are being triggered, you can run the following command:

This will help you locate potential instances where the unbound-method rule might be triggered, allowing you to address them directly rather than disabling the rule.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for usage of methods that might trigger the unbound-method rule
rg --type typescript '\b(this\.[a-zA-Z_]\w*|[a-zA-Z_]\w*\.[a-zA-Z_]\w*)\s*[,)]' ./src

Length of output: 122

Script:

#!/bin/bash
# Search for usage of methods that might trigger the unbound-method rule in TypeScript files
rg '\b(this\.[a-zA-Z_]\w*|[a-zA-Z_]\w*\.[a-zA-Z_]\w*)\s*[,)]' ./src -g '*.ts' -g '*.tsx'

Length of output: 136

Script:

#!/bin/bash
# Search for usage of methods that might trigger the unbound-method rule in all TypeScript files
rg '\b(this\.[a-zA-Z_]\w*|[a-zA-Z_]\w*\.[a-zA-Z_]\w*)\s*[,)]' . -g '*.ts' -g '*.tsx'

Length of output: 21597

/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-call */
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/tsconfig.app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"types": [],
"types": ["node"],
"target": "ES2022",
"useDefineForClassFields": false
},
"files": ["src/main.ts"],
"files": ["src/main.ts", "src/main.server.ts", "server.ts"],
"include": ["src/**/*.d.ts", "tailwind.config.js"],
"exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"]
}
3 changes: 2 additions & 1 deletion apps/docs/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"target": "ES2022"
"target": "ES2022",
"esModuleInterop": true
},
"angularCompilerOptions": {
"strictInjectionParameters": true,
Expand Down
10 changes: 0 additions & 10 deletions apps/docs/tsconfig.server.json
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions libs/flowbite-angular/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export * from './lib/components';
export * from './lib/pipes';
export * from './lib/services';
export * from './lib/utils';
export * from './lib/directives';
2 changes: 2 additions & 0 deletions libs/flowbite-angular/src/lib/directives/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { FlowbiteRouterLinkActiveDirective } from './flowbite-router-link-active.directive';
export { FlowbiteRouterLinkDirective } from './flowbite-router-link.directive';
Comment on lines +1 to +2
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Custom router link directives are implemented and declared but currently unused.

The FlowbiteRouterLinkActiveDirective and FlowbiteRouterLinkDirective are properly implemented and declared in Angular modules. However, they are not found to be used in any component templates. Please verify whether these directives are intended for future use or consider removing them to avoid unnecessary code in the codebase.

Analysis chain

LGTM! Consider verifying directive implementations.

The export statements for the custom router link directives look good. They follow a consistent naming convention and are likely part of integrating Flowbite with Angular's routing system.

To ensure these directives are properly implemented and used, consider running the following verification:

This script will help verify:

  1. The implementation of both directives
  2. Their usage in component templates
  3. Their declaration in Angular modules

Please review the results to ensure proper implementation and usage throughout the project.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the implementation and usage of the custom router link directives

# Check the implementation of the directives
echo "Checking FlowbiteRouterLinkActiveDirective implementation:"
ast-grep --lang typescript --pattern 'class FlowbiteRouterLinkActiveDirective {
  $$$
}'

echo "Checking FlowbiteRouterLinkDirective implementation:"
ast-grep --lang typescript --pattern 'class FlowbiteRouterLinkDirective {
  $$$
}'

# Check for usage of the directives in component templates
echo "Checking usage of FlowbiteRouterLinkActiveDirective:"
rg --type html 'flowbiteRouterLinkActive'

echo "Checking usage of FlowbiteRouterLinkDirective:"
rg --type html 'flowbiteRouterLink'

# Check if the directives are declared in any Angular modules
echo "Checking if directives are declared in Angular modules:"
rg --type typescript '(FlowbiteRouterLinkActiveDirective|FlowbiteRouterLinkDirective)' -C 5

Length of output: 4885

Script:

#!/bin/bash
# Description: Re-verify the implementation and usage of the custom router link directives with corrected rg commands

# Check the implementation of the directives
echo "Checking FlowbiteRouterLinkActiveDirective implementation:"
ast-grep --lang typescript --pattern 'class FlowbiteRouterLinkActiveDirective {
  $$$
}'

echo "Checking FlowbiteRouterLinkDirective implementation:"
ast-grep --lang typescript --pattern 'class FlowbiteRouterLinkDirective {
  $$$
}'

# Check for usage of the directives in component templates
echo "Checking usage of FlowbiteRouterLinkActiveDirective:"
rg --glob '*.html' 'flowbiteRouterLinkActive'

echo "Checking usage of FlowbiteRouterLinkDirective:"
rg --glob '*.html' 'flowbiteRouterLink'

# Check if the directives are declared in any Angular modules
echo "Checking if directives are declared in Angular modules:"
rg --glob '*.ts' '(FlowbiteRouterLinkActiveDirective|FlowbiteRouterLinkDirective)' -C 5

Length of output: 23519

59 changes: 30 additions & 29 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,50 +21,51 @@
"test": "nx run-many --target test --all"
},
"dependencies": {
"@angular-eslint/template-parser": "17.3.0",
"@angular/animations": "18.0.1",
"@angular/common": "18.0.1",
"@angular/compiler": "18.0.1",
"@angular/core": "18.0.1",
"@angular/platform-browser": "18.0.1",
"@angular/platform-browser-dynamic": "18.0.1",
"@angular/platform-server": "18.0.1",
"@angular/router": "18.0.1",
"@angular/ssr": "18.0.2",
"@angular-eslint/template-parser": "18.0.1",
"@angular/animations": "18.2.5",
"@angular/common": "18.2.5",
"@angular/compiler": "18.2.5",
"@angular/core": "18.2.5",
"@angular/platform-browser": "18.2.5",
"@angular/platform-browser-dynamic": "18.2.5",
"@angular/platform-server": "18.2.5",
"@angular/router": "18.2.5",
"@angular/ssr": "18.2.5",
"@floating-ui/dom": "^1.2.6",
"@nx/angular": "19.1.1",
"@nx/angular": "19.8.0",
"express": "~4.18.2",
"rxjs": "7.8.1",
"tailwind-merge": "^2.2.1",
"tslib": "^2.0.0",
"zone.js": "0.14.6"
},
"devDependencies": {
"@angular-devkit/build-angular": "18.0.2",
"@angular-devkit/core": "18.0.2",
"@angular-devkit/schematics": "18.0.2",
"@angular-eslint/eslint-plugin": "17.3.0",
"@angular-eslint/eslint-plugin-template": "17.3.0",
"@angular/cli": "~18.0.0",
"@angular/compiler-cli": "18.0.1",
"@angular/language-service": "18.0.1",
"@angular-devkit/build-angular": "18.2.5",
"@angular-devkit/core": "18.2.5",
"@angular-devkit/schematics": "18.2.5",
"@angular-eslint/eslint-plugin": "18.0.1",
"@angular-eslint/eslint-plugin-template": "18.0.1",
"@angular/cli": "~18.2.0",
"@angular/compiler-cli": "18.2.5",
"@angular/language-service": "18.2.5",
"@commitlint/cli": "^18.4.4",
"@commitlint/config-conventional": "^18.4.4",
"@ianvs/prettier-plugin-sort-imports": "^4.3.0",
"@nx/cypress": "19.1.1",
"@nx/eslint": "19.1.1",
"@nx/eslint-plugin": "19.1.1",
"@nx/jest": "19.1.1",
"@nx/workspace": "19.1.1",
"@schematics/angular": "18.0.2",
"@nx/cypress": "19.8.0",
"@nx/eslint": "19.8.0",
"@nx/eslint-plugin": "19.8.0",
"@nx/jest": "19.8.0",
"@nx/workspace": "19.8.0",
"@schematics/angular": "18.2.5",
"@types/express": "4.17.14",
"@types/jest": "29.5.11",
"@types/jest": "29.5.13",
"@types/node": "18.16.9",
"@typescript-eslint/eslint-plugin": "7.3.0",
"@typescript-eslint/parser": "7.3.0",
"@typescript-eslint/utils": "^7.16.0",
"autoprefixer": "^10.4.0",
"browser-sync": "^3.0.0",
"cypress": "13.8.0",
"cypress": "13.13.0",
"eslint": "8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-cypress": "2.15.1",
Expand All @@ -73,8 +74,8 @@
"jest-environment-jsdom": "29.7.0",
"jest-preset-angular": "14.1.0",
"lint-staged": "^15.2.0",
"ng-packagr": "18.0.0",
"nx": "19.1.1",
"ng-packagr": "18.2.1",
"nx": "19.8.0",
"postcss": "^8.4.13",
"postcss-import": "16.0.0",
"postcss-preset-env": "9.3.0",
Expand Down
12 changes: 9 additions & 3 deletions vercel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,22 @@
"version": 2,
"public": true,
"name": "flowbite-angular",
"devCommand": "node dist/docs-static/server/main.js",
"framework": "angular",
"buildCommand": "yarn nx run docs:build",
"outputDirectory": "dist/docs-static",
"installCommand": "yarn install",
"env": {
"FORCE_RUNTIME_TAG": "canary"
},
"rewrites": [
{
"source": "/(.*)",
"destination": "/api"
}
],
"functions": {
"api/index.js": {
"includeFiles": "dist/docs-static/browser/**"
"api/index.mjs": {
"includeFiles": "dist/docs-static/**"
}
}
}