### Serve framework locally Source: https://github.com/analogjs/analog/blob/beta/CONTRIBUTING.md Starts the example application locally from the root folder. ```shell pnpm dev ``` -------------------------------- ### Create Analog Project with PNPM Source: https://github.com/analogjs/analog/blob/beta/packages/create-analog/README.md Use this command to start a new Analog project with PNPM. Follow the on-screen prompts to complete the setup. ```bash pnpm create analog ``` -------------------------------- ### Install @analogjs/vite-plugin-angular with bun Source: https://github.com/analogjs/analog/blob/beta/packages/vite-plugin-angular/README.md Install the plugin as a development dependency using bun. ```sh bun install @analogjs/vite-plugin-angular --dev ``` -------------------------------- ### Manual Installation Source: https://github.com/analogjs/analog/blob/beta/packages/astro-angular/README.md Manually install the integration and required Angular dependencies. ```sh yarn add @analogjs/astro-angular ``` ```sh npm install @angular/build @angular/{animations,common,compiler-cli,compiler,core,language-service,forms,platform-browser,platform-server} rxjs tslib --save ``` -------------------------------- ### Install @analogjs/platform Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/guides/libraries.md Install the required platform package using your preferred package manager. ```shell npm install @analogjs/platform --save-dev ``` ```shell yarn add @analogjs/platform --dev ``` ```shell pnpm install -w @analogjs/platform ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/analogjs/analog/blob/beta/packages/create-analog/template-blog/README.md Run this command in your project's root directory to install all necessary dependencies. ```bash npm install ``` -------------------------------- ### Install @analogjs/vitest-angular Source: https://github.com/analogjs/analog/blob/beta/packages/vitest-angular/README.md Commands to install the necessary packages using various package managers. ```sh ng add @analogjs/vitest-angular ``` ```sh npm install @analogjs/vitest-angular vitest --save-dev ``` ```sh pnpm install -w @analogjs/vitest-angular vitest --dev ``` ```sh yarn install @analogjs/vitest-angular vitest --dev ``` -------------------------------- ### Render Web Service Start Command Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md This command is used to start the Analog server when deploying to Render as a Web Service. ```bash node dist/analog/server/index.mjs ``` -------------------------------- ### Serve the Analog application Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/nx/index.md Starts the development server for the specified application. ```shell npx nx serve analog-app ``` -------------------------------- ### Install vite-tsconfig-paths Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Commands to install the plugin for various package managers. ```shell npm install vite-tsconfig-paths --save-dev ``` ```shell yarn add vite-tsconfig-paths --dev ``` ```shell pnpm install -w vite-tsconfig-paths --save-dev ``` -------------------------------- ### Start Development Server Source: https://github.com/analogjs/analog/blob/beta/packages/create-analog/template-blog/README.md Use this command to launch the development server. It provides live reloading for source file changes. Access the application at http://localhost:5173/. ```bash npm start ``` -------------------------------- ### Install Ionicons (pnpm) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Install the Ionicons icon library using pnpm. ```shell pnpm install ionicons ``` -------------------------------- ### Install Ionicons (yarn) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Install the Ionicons icon library using yarn. ```shell yarn add ionicons ``` -------------------------------- ### Run Setup Schematic Source: https://github.com/analogjs/analog/blob/beta/packages/vitest-angular/README.md Commands to automatically configure Vitest in an existing Angular project. ```sh npx ng generate @analogjs/vitest-angular:setup --project [your-project-name] ``` ```shell ng g @analogjs/vitest-angular:setup --project [your-project-name] --browserMode ``` -------------------------------- ### Install Ionicons (npm) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Install the Ionicons icon library using npm. ```shell npm install ionicons ``` -------------------------------- ### Install @analogjs/vite-plugin-angular with npm Source: https://github.com/analogjs/analog/blob/beta/packages/vite-plugin-angular/README.md Install the plugin as a development dependency using npm. ```sh npm install @analogjs/vite-plugin-angular --save-dev ``` -------------------------------- ### Install @analogjs/vite-plugin-angular with yarn Source: https://github.com/analogjs/analog/blob/beta/packages/vite-plugin-angular/README.md Install the plugin as a development dependency using yarn. ```sh yarn install @analogjs/vite-plugin-angular --dev ``` -------------------------------- ### Serve documentation website Source: https://github.com/analogjs/analog/blob/beta/CONTRIBUTING.md Starts the Docusaurus development server for the documentation website. ```shell pnpm nx serve ``` ```shell pnpm nx serve docs-app ``` -------------------------------- ### Install Storybook Integration (bun) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Install the Storybook Integration for Angular and Vite using bun. ```shell bun install @analogjs/storybook-angular @analogjs/vite-plugin-angular --save-dev ``` -------------------------------- ### Install @analogjs/vite-plugin-angular with pnpm Source: https://github.com/analogjs/analog/blob/beta/packages/vite-plugin-angular/README.md Install the plugin as a development dependency using pnpm. ```sh pnpm install @analogjs/vite-plugin-angular --save-dev ``` -------------------------------- ### Install dependencies Source: https://github.com/analogjs/analog/blob/beta/CONTRIBUTING.md Run this command from the root folder to ensure development dependencies are up-to-date. ```shell pnpm i ``` -------------------------------- ### Configure src/test-setup.ts Source: https://github.com/analogjs/analog/blob/beta/packages/vitest-angular/README.md Setup scripts for TestBed, supporting both Zoneless and Zone.js environments. ```ts import '@angular/compiler'; import '@analogjs/vitest-angular/setup-snapshots'; import '@analogjs/vitest-angular/setup-serializers'; import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'; setupTestBed(); ``` ```ts import '@angular/compiler'; import '@analogjs/vitest-angular/setup-zone'; import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'; setupTestBed({ zoneless: false, }); ``` -------------------------------- ### Install Edgio CLI Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md Install the Edgio command-line interface globally to manage Edgio deployments. ```bash npm i -g @edgio/cli ``` -------------------------------- ### Build and Preview Locally Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md Build your Analog.js application with the Firebase preset and start the local Firebase emulator to preview your deployment. ```bash BUILD_PRESET=firebase npm run build firebase emulators:start ``` -------------------------------- ### Install Satori Dependencies (npm) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/api/og-image-generation.md Install satori, satori-html, and sharp using npm. These are required for generating Open Graph images. ```shell npm install satori satori-html sharp --save ``` -------------------------------- ### Setup Vitest Configuration for Storybook Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Create a `.storybook/vitest.setup.ts` file to configure Vitest annotations and import project-level annotations from `./preview`. This setup is crucial for Vitest to correctly interact with Storybook components. ```typescript import '@angular/compiler'; import { setProjectAnnotations } from '@analogjs/storybook-angular/testing'; import { beforeAll } from 'vitest'; import * as projectAnnotations from './preview'; const project = setProjectAnnotations([projectAnnotations]); beforeAll(project.beforeAll); ``` -------------------------------- ### Install Satori Dependencies (pnpm) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/api/og-image-generation.md Install satori, satori-html, and sharp using pnpm. These are required for generating Open Graph images. ```shell pnpm install -w satori satori-html sharp ``` -------------------------------- ### Run Storybook Development Server Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Use this command to start the Storybook development server for live previewing of components. ```sh npm run storybook ``` -------------------------------- ### Install Satori Dependencies (Yarn) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/api/og-image-generation.md Install satori, satori-html, and sharp using Yarn. These are required for generating Open Graph images. ```shell yarn add satori satori-html sharp ``` -------------------------------- ### Install Analog platform package Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/nx/index.md Adds the @analogjs/platform package as a development dependency to an existing workspace. ```shell npm install @analogjs/platform --save-dev ``` ```shell yarn add @analogjs/platform --dev ``` ```shell pnpm install @analogjs/platform --save-dev ``` -------------------------------- ### Configure test-setup.ts for Zone.js Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Setup TestBed for projects using Zone.js change detection. ```typescript import '@angular/compiler'; import '@analogjs/vitest-angular/setup-zone'; import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'; setupTestBed({ zoneless: false, }); ``` -------------------------------- ### Manually install Vitest dependencies Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Install necessary packages for manual Vitest integration. ```shell npm install @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --save-dev ``` ```shell yarn add @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --dev ``` ```shell pnpm install -w @analogjs/vite-plugin-angular @analogjs/vitest-angular jsdom --save-dev ``` -------------------------------- ### Install Integration via CLI Source: https://github.com/analogjs/analog/blob/beta/packages/astro-angular/README.md Use the Astro CLI to automatically install the integration and its dependencies. ```sh npx astro add @analogjs/astro-angular ``` ```sh pnpm astro add @analogjs/astro-angular ``` ```sh yarn astro add @analogjs/astro-angular ``` -------------------------------- ### Install Capacitor Platform Packages Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Install the necessary Android and iOS packages using your preferred package manager. ```shell npm install @capacitor/android npm install @capacitor/ios ``` ```shell yarn add @capacitor/android yarn add @capacitor/ios ``` ```shell pnpm install @capacitor/android pnpm install @capacitor/ios ``` -------------------------------- ### Example Sitemap XML Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/server/static-site-generation.md An example of the generated sitemap.xml file, showing the structure with loc, lastmod, changefreq, and priority properties for different routes. ```xml https://analogjs.org/ 2023-07-01 https://analogjs.org/blog/2022-12-27-my-first-post 2022-12-27 https://analogjs.org/blog/archived/hello-world 2022-12-01 never ``` -------------------------------- ### Install Storybook Integration (yarn) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Install the Storybook Integration for Angular and Vite using yarn. ```shell yarn add @analogjs/storybook-angular @analogjs/vite-plugin-angular --dev ``` -------------------------------- ### Install Storybook Integration (pnpm) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Install the Storybook Integration for Angular and Vite using pnpm. ```shell pnpm install @analogjs/storybook-angular @analogjs/vite-plugin-angular -w --save-dev ``` -------------------------------- ### Start Node.js Production Server Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/overview.md Run this command after building the production output to launch the standalone Node server. The server will listen on http://localhost:3000 by default. ```bash node dist/analog/server/index.mjs Listening on http://localhost:3000 ``` -------------------------------- ### Install Storybook Integration (npm) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Install the Storybook Integration for Angular and Vite using npm. ```shell npm install @analogjs/storybook-angular @analogjs/vite-plugin-angular --save-dev ``` -------------------------------- ### Configure test-setup.ts for Zoneless Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Setup TestBed for projects using Zoneless change detection. ```typescript import '@angular/compiler'; import '@analogjs/vitest-angular/setup-snapshots'; import '@analogjs/vitest-angular/setup-serializers'; import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'; setupTestBed(); ``` -------------------------------- ### Snapshot File Content Example Source: https://github.com/analogjs/analog/blob/beta/packages/vitest-angular/README.md This is an example of the content generated in a `.snap` file after running a snapshot test. Review and commit these snapshots to version control. ```typescript // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[``CardComponent > should create the app 1``] = ` `; ``` -------------------------------- ### Run Vitest setup schematic Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Execute the schematic to configure Vite and test settings for a specific project. ```shell ng g @analogjs/vitest-angular:setup --project [your-project-name] ``` ```shell ng g @analogjs/vitest-angular:setup --project [your-project-name] --browserMode ``` -------------------------------- ### Run Unit Tests with Nx Source: https://github.com/analogjs/analog/blob/beta/libs/my-package/README.md Execute unit tests for the my-package library using the Nx command-line tool. Ensure Nx is installed and configured for the project. ```bash nx test my-package ``` -------------------------------- ### Install Vitest Addon and Dependencies Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Install the necessary packages for integrating Vitest with Storybook, including the AnalogJS Vitest addon, Storybook's interaction addon, Vitest itself, and Playwright for browser testing. ```bash npm install @analogjs/vitest-angular @storybook/addon-vitest vitest @vitest/browser-playwright --save-dev ``` -------------------------------- ### Initialize a new Analog project Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/packages/create-analog/overview.md Use these commands to scaffold a new project using your preferred package manager. ```shell npm create analog@latest ``` ```shell yarn create analog ``` ```shell pnpm create analog ``` -------------------------------- ### Initialize Capacitor project Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Run the initialization command to set up the Capacitor project configuration. ```shell npx cap init ``` -------------------------------- ### Install Playwright Browser Binaries Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Ensure Playwright has the necessary browser binaries installed for running browser-based tests. This command installs the Chromium browser, which is commonly used for testing. ```bash npx playwright install chromium ``` -------------------------------- ### Configuration Options for setupTestBed Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md The `setupTestBed` function allows customization of the test environment. Key options include `zoneless` for change detection, `providers` for additional dependencies, and `teardown.destroyAfterEach` to control component destruction after tests. ```APIDOC ## Configuration Options for `setupTestBed()` ### Description The `setupTestBed()` function accepts an optional configuration object to customize the test environment. ### Parameters #### Request Body - **zoneless** (boolean) - Optional - Whether to use zoneless change detection. Defaults to `true`. - **providers** (`Type[]`) - Optional - Additional providers to include in the test environment. Defaults to `[]`. - **teardown.destroyAfterEach** (boolean) - Optional - Whether to destroy the test environment after each test. Set to `false` to keep the component rendered for inspection. Defaults to `true`. ### Request Example ```typescript setupTestBed({ zoneless: true, providers: [], teardown: { destroyAfterEach: false }, }); ``` ``` -------------------------------- ### Serve static documentation website Source: https://github.com/analogjs/analog/blob/beta/CONTRIBUTING.md Runs the generated static documentation website locally. ```shell pnpm nx serve-static ``` ```shell pnpm nx serve-static docs-app ``` -------------------------------- ### Build documentation website Source: https://github.com/analogjs/analog/blob/beta/CONTRIBUTING.md Builds the documentation website locally using Nx. ```shell pnpm nx build ``` ```shell pnpm nx build docs-app ``` -------------------------------- ### Create New Analog Project Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/getting-started.md Use this command with your preferred package manager to scaffold a new Analog project. Ensure you have Node.js 22+ and Angular v17+ installed. ```shell npm create analog@latest ``` ```shell yarn create analog ``` ```shell pnpm create analog ``` ```shell bun create analog ``` -------------------------------- ### Configure Static Assets in Storybook Main Config Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Set up static assets by defining the `staticDirs` array in your `.storybook/main.ts` configuration file. This example adds the `public` directory from `src/public`. ```typescript import { StorybookConfig } from '@analogjs/storybook-angular'; const config: StorybookConfig = { // other config, addons, etc. framework: { name: '@analogjs/storybook-angular', options: {}, }, staticDirs: ['../public'], }; export default config; ``` -------------------------------- ### Initialize Netlify Project with CLI Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md Use this command to initialize a new Netlify project and automatically configure build settings in a `netlify.toml` file. ```bash npx netlify init ``` -------------------------------- ### Install vite-tsconfig-paths with Yarn Source: https://github.com/analogjs/analog/blob/beta/packages/vitest-angular/README.md Install the `vite-tsconfig-paths` package as a development dependency using Yarn. ```shell yarn add vite-tsconfig-paths --dev ``` -------------------------------- ### setupTestBed() Configuration Source: https://github.com/analogjs/analog/blob/beta/packages/vitest-angular/README.md Configuration options for the setupTestBed function used in the test-setup.ts file. ```APIDOC ## setupTestBed() ### Description Configures the Angular TestBed environment for Vitest. ### Parameters #### Options - **zoneless** (boolean) - Optional - Whether to use zoneless change detection (default: true). - **providers** (Type[]) - Optional - Additional providers to include in the test environment (default: []). - **teardown.destroyAfterEach** (boolean) - Optional - Whether to destroy the test environment after each test (default: true). ``` -------------------------------- ### Install vite-tsconfig-paths with pnpm Source: https://github.com/analogjs/analog/blob/beta/packages/vitest-angular/README.md Install the `vite-tsconfig-paths` package as a development dependency using pnpm. ```shell pnpm install -w vite-tsconfig-paths --dev ``` -------------------------------- ### Install vite-tsconfig-paths with npm Source: https://github.com/analogjs/analog/blob/beta/packages/vitest-angular/README.md Install the `vite-tsconfig-paths` package as a development dependency using npm. ```shell npm install vite-tsconfig-paths --save-dev ``` -------------------------------- ### Initialize Storybook Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/storybook/index.md Run this command to initialize Storybook for your project if it's not already set up. ```shell npx storybook@latest init ``` -------------------------------- ### Install Vitest Angular package Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Install the required development dependency for Vitest integration. ```shell npm install @analogjs/vitest-angular --save-dev ``` ```shell yarn add @analogjs/vitest-angular --dev ``` ```shell pnpm install -w @analogjs/vitest-angular --save-dev ``` -------------------------------- ### Build the Analog application Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/nx/index.md Compiles the application for production deployment. ```shell npx nx build analog-app ``` -------------------------------- ### Build the Docs Site with Nx Source: https://github.com/analogjs/analog/blob/beta/AGENTS.md Build the documentation site using Nx. The 'astro-app' is excluded from the main build. ```bash pnpm nx build docs-app ``` -------------------------------- ### Build and Deploy to Firebase Hosting Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md Build your Analog.js application using the Firebase preset and then deploy it to Firebase Hosting using the Firebase CLI. ```bash BUILD_PRESET=firebase npm run build firebase deploy ``` -------------------------------- ### Install Capacitor dependencies Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Install core and CLI packages for Capacitor using your preferred package manager. ```shell npm install @capacitor/core npm install -D @capacitor/cli ``` ```shell yarn add @capacitor/core yarn add -D @capacitor/cli ``` ```shell pnpm install @capacitor/core pnpm install -D @capacitor/cli ``` -------------------------------- ### Markdown Content Route Example Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/routing/content.md Example of a markdown file (`src/app/pages/about.md`) defining an `/about` route with frontmatter. ```markdown --- title: About meta: - name: description content: About Page Description - property: og:title content: About --- ## About Analog Analog is a meta-framework for Angular. [Back Home](./) ``` -------------------------------- ### Install Firebase Dependencies Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md Install the necessary Firebase Admin SDK and Cloud Functions packages as development dependencies. ```bash npm install -D firebase-admin firebase-functions firebase-functions-test ``` -------------------------------- ### Deploy Analog.js App with Netlify CLI Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md After initialization, use this command to deploy your Analog.js application to Netlify. ```bash npx netlify deploy ``` -------------------------------- ### Configure setupTestBed options Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Use this configuration to customize the test environment, such as disabling automatic teardown for component inspection. ```ts setupTestBed({ zoneless: true, providers: [], teardown: { destroyAfterEach: false }, }); ``` -------------------------------- ### Install browser testing dependencies Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Install Playwright and the Vitest browser provider for running tests in a browser environment. ```shell npm install @vitest/browser-playwright playwright --save-dev ``` ```shell yarn add @vitest/browser-playwright playwright --dev ``` ```shell pnpm install -w @vitest/browser-playwright playwright ``` -------------------------------- ### Install Ionic Framework (pnpm) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Install the latest version of the Ionic Framework Angular package using pnpm. ```shell pnpm install @ionic/angular@latest ``` -------------------------------- ### Install Ionic Framework (yarn) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Install the latest version of the Ionic Framework Angular package using yarn. ```shell yarn add @ionic/angular@latest ``` -------------------------------- ### Install Ionic Framework (npm) Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Install the latest version of the Ionic Framework Angular package using npm. ```shell npm install @ionic/angular@latest ``` -------------------------------- ### Create New Analog Project with Bun Source: https://github.com/analogjs/analog/blob/beta/README.md Use this command to scaffold a new Analog.js project using Bun. Follow the prompts to configure your project. ```bash bun create analog@latest ``` -------------------------------- ### Build Project for Production Source: https://github.com/analogjs/analog/blob/beta/packages/create-analog/template-blog/README.md This command builds the client and server components of the project. Client build artifacts are in `dist/analog/public`, and server build artifacts are in `dist/analog/server`. ```bash npm run build ``` -------------------------------- ### Install Firebase CLI Globally Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md Install the Firebase CLI globally to manage your Firebase projects and deployments from your local machine. ```bash npm install -g firebase-tools ``` -------------------------------- ### Install Browser Testing Packages Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Install necessary packages for running Vitest tests in a browser environment using Playwright. ```APIDOC ## Install Browser Testing Packages ### Description Install `@vitest/browser-playwright` and `playwright` to enable experimental browser testing support. ### Installation #### npm ```shell npm install @vitest/browser-playwright playwright --save-dev ``` #### Yarn ```shell yarn add @vitest/browser-playwright playwright --dev ``` #### pnpm ```shell pnpm install -w @vitest/browser-playwright playwright ``` ``` -------------------------------- ### Initialize Edgio with Analog Connector Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md Initialize Edgio in your project, specifying the Analog.js connector for seamless integration. ```bash edgio init --connector=@edgio/analogjs ``` -------------------------------- ### Install Angular Material dependencies Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/angular-material/index.md Install the required Angular CDK and Material packages using your preferred package manager. ```shell npm install @angular/cdk @angular/material ``` ```shell yarn add @angular/cdk @angular/material ``` ```shell pnpm install @angular/cdk @angular/material ``` -------------------------------- ### Build the library Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/guides/libraries.md Execute the build command for the library project. ```sh ng build my-lib ``` -------------------------------- ### Create New Analog Project with npm Source: https://github.com/analogjs/analog/blob/beta/README.md Use this command to scaffold a new Analog.js project using npm. Follow the prompts to configure your project. ```bash npm create analog@latest ``` -------------------------------- ### Install Storybook Package Source: https://github.com/analogjs/analog/blob/beta/packages/storybook-angular/README.md Install the Storybook Plugin for Angular and Vite using npm. This command adds the necessary package as a development dependency. ```bash npm install @analogjs/storybook-angular --save-dev ``` -------------------------------- ### Markdown Content File Example Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/routing/content.md Example of a markdown content file with frontmatter attributes, including title, slug, description, and cover image. ```markdown --- title: My First Post slug: 2022-12-27-my-first-post description: My First Post Description coverImage: https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80 --- Hello World ``` -------------------------------- ### Sync Project Files Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Synchronize your web assets and configuration with the native platform projects. ```shell npx cap sync ``` -------------------------------- ### Install Zerops CLI Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/deployment/providers.md Installs the Zerops CLI globally using npm. This command-line tool is used for managing deployments and interacting with Zerops services. ```bash # To download the zcli binary directly, # use https://github.com/zeropsio/zcli/releases npm i -g @zerops/zcli ``` -------------------------------- ### Scaffold project with specific template Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/packages/create-analog/overview.md Use flags to specify the project name and template preset during initialization. ```shell # npm >=7.0 npm create analog@latest my-angular-app -- --template latest # npm 6.x npm create analog@latest my-angular-app -- --template blog ``` ```shell yarn create analog my-angular-app --template blog ``` ```shell pnpm create analog my-angular-app --template blog ``` -------------------------------- ### Add Native Platforms Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ionic/index.md Initialize the Android and iOS project directories within your application. ```shell npx cap add android npx cap add ios ``` -------------------------------- ### Handle GET Request for Specific Resource Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/api/overview.md Define an API route that specifically handles GET requests by appending `.get` to the filename. Access route parameters using `getRouterParam`. ```typescript // /server/routes/api/v1/users/[id].get.ts import { defineEventHandler, getRouterParam } from 'h3'; export default defineEventHandler(async (event) => { const id = getRouterParam(event, 'id'); // TODO: fetch user by id return `User profile of ${id}!`; }); ``` -------------------------------- ### Build framework projects Source: https://github.com/analogjs/analog/blob/beta/CONTRIBUTING.md Builds all projects locally using Nx from the root folder. ```shell pnpm build ``` -------------------------------- ### Define Search Form with GET Action Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/guides/forms.md This component defines a search form that uses the GET method. Form inputs will be appended to the current URL as query parameters. Ensure the `FormAction` is imported. ```typescript // src/app/pages/search.page.ts import { Component, computed } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { injectLoad, FormAction } from '@analogjs/router'; import type { load } from './search.server'; @Component({ selector: 'app-search-page', standalone: true, imports: [FormAction], template: `

Search

@if (searchTerm()) {

Search Term: {{ searchTerm() }}

} `, }) export default class NewsletterComponent { loader = toSignal(injectLoad(), { requireSync: true }); searchTerm = computed(() => this.loader().searchTerm); } ``` -------------------------------- ### Update test-setup.ts for browser preview Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/testing/vitest.md Configure the test bed to keep components rendered after tests finish for visual inspection. ```ts import '@angular/compiler'; import '@analogjs/vitest-angular/setup-snapshots'; import '@analogjs/vitest-angular/setup-serializers'; import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'; setupTestBed({ teardown: { destroyAfterEach: false }, // Enables visual test preview }); ``` -------------------------------- ### Install @angular/localize Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/features/i18n/overview.md Add the @angular/localize package to your project to enable internationalization features. ```bash npm install @angular/localize ``` -------------------------------- ### Configure AI Assistant with Docs Index Source: https://github.com/analogjs/analog/blob/beta/apps/docs-app/docs/integrations/ai/index.md Use the compact index file to provide an AI tool with a lightweight entry point for documentation retrieval. ```text Use https://analogjs.org/llms.txt as the primary AnalogJS documentation index. ``` -------------------------------- ### Pull request title examples Source: https://github.com/analogjs/analog/blob/beta/CONTRIBUTING.md Standardized formats for pull request titles. ```text feat(content): update prismjs to latest version ``` ```text fix(content): fix error when rendering markdown ```