-
-
Notifications
You must be signed in to change notification settings - Fork 216
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(nx-plugin): add init schematic/generator for migrating an Angula…
…r SPA to Analog (#1049)
- Loading branch information
1 parent
c45cad0
commit ca2b3df
Showing
29 changed files
with
741 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import Tabs from '@theme/Tabs'; | ||
| import TabItem from '@theme/TabItem'; | ||
|
|
||
| # Migrating an Angular app to Analog | ||
|
|
||
| An existing Angular Single Page Application can be configured to use Analog using a schematic/generator for Angular CLI or Nx workspaces. | ||
|
|
||
| ## Using a Schematic/Generator | ||
|
|
||
| First, install the `@analogjs/platform` package: | ||
|
|
||
| <Tabs groupId="package-manager"> | ||
| <TabItem value="npm"> | ||
|
|
||
| ```shell | ||
| npm install @analogjs/platform --save-dev | ||
| ``` | ||
|
|
||
| </TabItem> | ||
|
|
||
| <TabItem label="Yarn" value="yarn"> | ||
|
|
||
| ```shell | ||
| yarn add @analogjs/platform --dev | ||
| ``` | ||
|
|
||
| </TabItem> | ||
|
|
||
| <TabItem value="pnpm"> | ||
|
|
||
| ```shell | ||
| pnpm install -w @analogjs/platform | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| Next, run the command to set up the Vite config, update the build/serve targets in the project configuration, move necessary files, and optionally set up Vitest for unit testing. | ||
|
|
||
| ```shell | ||
| npx ng generate @analogjs/platform:init --project [your-project-name] | ||
| ``` | ||
|
|
||
| For Nx projects: | ||
|
|
||
| ```shell | ||
| npx nx generate @analogjs/platform:init --project [your-project-name] | ||
| ``` | ||
|
|
||
| ## Updating Global Styles and Scripts | ||
|
|
||
| If you have any global scripts or styles configured in the `angular.json`, move them inside the `head` tag in the `index.html`. | ||
|
|
||
| ```html | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>My Analog app</title> | ||
| <base href="/" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link rel="icon" type="image/x-icon" href="/favicon.ico" /> | ||
| <link rel="stylesheet" href="/src/styles.css" /> | ||
| </head> | ||
| <body> | ||
| <app-root></app-root> | ||
| <script type="module" src="/src/main.ts"></script> | ||
| </body> | ||
| </html> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { convertNxGenerator } from '@nx/devkit'; | ||
|
|
||
| import setupAnalogGenerator from './generator'; | ||
|
|
||
| export default convertNxGenerator(setupAnalogGenerator); |
45 changes: 45 additions & 0 deletions
45
packages/nx-plugin/src/generators/init/files/vite.config.ts__template__
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /// <reference types="vitest" /> | ||
|
|
||
| import { defineConfig } from 'vite'; | ||
| import analog from '@analogjs/platform'; | ||
| import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; | ||
|
|
||
| // https://vitejs.dev/config/ | ||
| export default defineConfig(({ mode }) => { | ||
| return { | ||
| root: __dirname, | ||
| public: 'src/assets', | ||
| cacheDir: '<%= offsetFromRoot %>node_modules/.vite', | ||
| build: { | ||
| outDir: '<%= offsetFromRoot %>dist/<%= projectRoot %>/client', | ||
| reportCompressedSize: true, | ||
| commonjsOptions: { transformMixedEsModules: true }, | ||
| target: ['es2020'], | ||
| }, | ||
| plugins: [ | ||
| analog({ | ||
| ssr: false, | ||
| static: true, | ||
| prerender: { | ||
| routes: [] | ||
| } | ||
| }), | ||
| nxViteTsPaths(), | ||
| ], | ||
| server: { | ||
| fs: { | ||
| allow: ['.'] | ||
| } | ||
| }, | ||
| test: { | ||
| globals: true, | ||
| environment: 'jsdom', | ||
| setupFiles: ['src/test-setup.ts'], | ||
| include: ['**/*.spec.ts'], | ||
| reporters: ['default'], | ||
| }, | ||
| define: { | ||
| 'import.meta.vitest': mode !== 'production', | ||
| }, | ||
| }; | ||
| }); |
Oops, something went wrong.