This project is an angular starter template for sanity.io. It can be used as a website, blog or even a web shop. All the different types are prepared as show case.
- Angular
- Netlify
- NgRx
- NX
- Sanity
- Scully
You can easily extend the project with Tailwind CSS, Material or others as usual in angular projects
The project is split into two different applications (in the apps folder).
The studio app is for defining and configure your types, pages and products. The web app is the angular client. There's also a folder web-e2e which you can use for creating cypress e2e tests for the angular app.
If you want to create or edit types. You can navigate to the studio/schemas folder. Here you'll find documents and objects. Documents define (document-) types like pages, blogs, products or similar. In the objects folder you can find elements which you can use inside the different document types. You can simply create the types you need. For further information see Sanity.io Schema Types Documentation
For the newly created type you generate a new component in src/app/components/elements. I recommend using nx for that (se documentation below), since you're inside an nx workspace.
Your new component must extend the DynamicComponent interface and implement the data input property which is defined as a type that extends SanityType interface.
Now you need to introduce your newly generated dynamic component to the resolvers. If your element is a document type, you need to introduce it to the content component:
**Please also ensure that you have included the new document type in the fetchContent method in sanity.service.ts ** Therefore you should have a look into Sanity GROQ queries
Before you can develop locally, you need to add your local angular client url (usually: https://localhost:4200) to the CORS policies in your sanity.io project. This can be done in the administration page at sanity.io
-
Install dependencies with
npm installin the root folder.. -
Run
sanity installin/apps/studioThis will install the necessary dependencies for Sanity Studio. -
Run
npm run serve:allin/. This will start the development servers for the Angular frontend and Sanity Studio. -
Run
npm run buildin/apps/weband thennpm run scully. This will build the Angular frontend and generate a static site which can be deployed anywhere (if you're not using netlify).
For testing your changes you can always run the apps locally using:
serve:all
since you're in an nx workspace this will bootstrap both applications (studio and web).
Please note that you need to initially run 'npm i' or 'yarn i' in the root folder and 'sanity install' in /apps/studio
If you don't want to use netlify for the web app. You can also generate the static site locally or on any build server. Therefore navigate to apps/web and run:
npm run build
and then
npm run scully
This will generate static files int dist/static which you can then copy to any server.
If you don't want to deploy sanity studio to netlify you can simply navigate to apps/studio and run:
npm run build
Although I didn't test this, you should also be able to copy this to your server
10-minute video showing all Nx features
Run ng g @nrwl/angular:app my-app to generate an application.
You can use any of the plugins above to generate applications as well.
When using Nx, you can create multiple applications and libraries in the same workspace.
Run ng g @nrwl/angular:lib my-lib to generate a library.
You can also use any of the plugins above to generate libraries as well.
Libraries are shareable across libraries and applications. They can be imported from @template/mylib.
Run ng g component my-component --project=my-app to generate a new component.
Run ng test my-app to execute the unit tests via Jest.
Run nx affected:test to execute the unit tests affected by a change.
Run ng e2e my-app to execute the end-to-end tests via Cypress.
Run nx affected:e2e to execute the end-to-end tests affected by a change.
Run nx dep-graph to see a diagram of the dependencies of your projects.
If you have any questions regarding this template please write me an email.
For questions regarding Sanity, visit the Sanity.io Documentation to learn more.
For questions regarding Nx, visit the Nx Documentation to learn more.