Add an Astro Project

The code for this example is available on GitHub:

Supported Features

Because we are not using an Nx plugin for Astro, there are few items we'll have to configure manually. We'll have to configure our own build system. There are no pre-created Astro-specific code generators. And we'll have to take care of updating any framework dependencies as needed.

โœ… Run Tasks โœ… Cache Task Results โœ… Remote Caching โœ… Explore the Graph โœ… Distribute Task Execution โœ… Integrate with Editors โœ… Automate Updating Nx โœ… Enforce Project Boundaries ๐Ÿšซ Use Code Generators ๐Ÿšซ Automate Updating Framework Dependencies

Create an astro app

โฏ

npm create astro@latest

Add Nx

We can leverage nx init to add Nx to the Astro application.

~/astro-appโฏ

npx nx@latest init

1NX ๐Ÿณ Nx initialization 2 3 4NX ๐Ÿง‘โ€๐Ÿ”ง Please answer the following questions about the scripts found in your package.json in order to generate task runner configuration 5 6โœ” Which of the following scripts are cacheable? (Produce the same output given the same input, e.g. build, test and lint usually are, serve and start are not). You can use spacebar to select one or more scripts. ยท build 7 8 9โœ” Would you like remote caching to make your build faster? ยท Yes 10 11NX ๐Ÿ“ฆ Installing dependencies 12 13NX ๐ŸŽ‰ Done! 14 15- Enabled computation caching! 16- Learn more at https://nx.dev/recipes/adopting-nx/adding-to-existing-project. 17

You can add a task as cacheable after the fact by updating the cacheableOperations in the nx.json file. Learn more about caching task results or how caching works.

Running Tasks

Because Nx understands package.json scripts, You can run the predefined scripts via Nx.

โฏ

nx build

If you plan on using your package manager to run the tasks, then you'll want to use nx exec to wrap the command

i.e.

package.json
1{ 2 "scripts": { 3 "e2e": "nx exec -- playwright test" 4 } 5} 6

Now when running npm run e2e Nx will be able to check if there is a cache hit or not.

If you plan to only run tasks with the Nx CLI, then you can omit nx exec. The safest way is to always include it in the package.json script.

Using Other Plugins

With Nx plugins, you can create projects to help break out functionality of the project. For example, using the @nx/js:library to contain our reusable .astro components.

Install @nx/js plugin.

Note: you should make sure any first party, @nx/ scoped, plugins match the nx package version

โฏ

nx add @nx/js@<nx-version>

Then generate a project

Directory Flag Behavior Changes

The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the as-provided vs. derived documentation for more details.

1NX Generating @nx/js:library 2 3โœ” Which unit test runner would you like to use? ยท none 4โœ” Which bundler would you like to use to build the library? Choose 'none' to skip build setup. ยท none 5 6CREATE libs/ui/tsconfig.json 7CREATE libs/ui/README.md 8CREATE libs/ui/src/index.ts 9CREATE libs/ui/src/lib/ui.ts 10CREATE libs/ui/tsconfig.lib.json 11CREATE libs/ui/project.json 12CREATE libs/ui/.eslintrc.json 13UPDATE tsconfig.json 14

If you plan to import .astro files within .ts files, then you can install the @astrojs/ts-plugin.

tsconfig.json
1{ 2 "extends": "astro/tsconfigs/strict", 3 "compilerOptions": { 4 "baseUrl": ".", 5 "plugins": [ 6 { 7 "name": "@astrojs/ts-plugin" 8 } 9 ], 10 "paths": { 11 "@myrepo/ui": ["ui/src/index.ts"] 12 } 13 } 14} 15

An easier option is to allow importing the files directly instead of reexporting the .astro files via the index.ts. You can do this by allowing deep imports in the tsconfig paths

tsconfig.json
1{ 2 "extends": "astro/tsconfigs/strict", 3 "compilerOptions": { 4 "baseUrl": ".", 5 "paths": { 6 // Note: the * allowing the deep imports 7 "@myrepo/ui/*": ["ui/src/*"] 8 } 9 } 10} 11

This allows imports in our .astro files from other projects like so.

src/pages/index.astro
1import Card from '@myrepo/ui/Card.astro'; 2import Footer from '@myrepo/ui/Footer.astro'; 3import Header from '@myrepo/ui/Header.astro'; 4