This guide covers installing a small sample of Daffodil's components into a new or existing Angular application. Daffodil enables you to build storefronts without immediately connecting to a platform. Start developing without committing to a specific ecommerce backend.
View the live demo to see Daffodil in action.
If you're starting a new storefront, you'll most likely want to create a local project so that you can use tooling such as Git.
Create a new Angular project with your desired project name:
npx @angular/cli@20 new my-project --style=scss --routing=true
If you don't have any preferences, just hit the enter key to take the default options and continue with the setup.
In your terminal, switch to your new Angular project:
cd my-project
Daffodil requires no server-side components by default. Simply install the commerce package to get up and running quickly:
npx ng add @daffodil/commerce
All dependencies should be installed at this point, so you can start your project by running the command:
npm start
If everything is successful, you should see a similar confirmation message in your terminal:
Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
➜ Local: http://localhost:4200/
➜ press h + enter to show help
Visit the path in Local (e.g., http://localhost:4200) to see your application.