This template includes a Angular app with a Sanity Studio – an open-source React application that connects to your Sanity project’s hosted dataset. The Studio is configured locally and can then be deployed for content collaboration.

• Fetch content seamlessly with Sanity Content Lake.
• Render beautiful block content using Portable Text.
• Manage and create content with the intuitive Sanity Studio.
• Advanced image cropping and rendering via Sanity Image URLs.

https://sanity-template-angular-clean.sanity.build

Run the command in your Terminal to initialize this template on your local computer.

See the documentation if you are having issues with the CLI.

npm create sanity@latest -- --template sanity-io/sanity-template-angular-clean

Copy the project id and dataset from the generated .env file in the /studio directory to the Angular project's environment file.

Specifically:

1. Open the /studio/.env file and note the values for SANITY_STUDIO_PROJECT_ID and SANITY_STUDIO_DATASET
2. Create or edit the /angular-app/.env file based on the .env.example template
3. Add the following lines with your values:

SANITY_PROJECT_ID="your-project-id"
SANITY_DATASET="your-dataset-name"

Navigate back to the template's root directory and start the development servers by running the following command

npm run dev

Open the Angular app running locally in your browser on http://localhost:4200.

Open the Studio running locally in your browser on http://localhost:3333. You should now see a screen prompting you to log in to the Studio. Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI.

The template comes pre-defined with a schema containing a Post document type.

From the Studio, click "+ Create" and select the Post document type. Go ahead and create and publish the document.

Your content should now appear in your Angular app (http://localhost:4200).

The schema for the Post document type is defined in the studio/src/schemaTypes/post.ts file. You can add more document types to the schema to suit your needs.

Your Angular frontend (/angular-app) and Sanity Studio (/studio) are still only running on your local computer. It's time to deploy and get it into the hands of other content editors.

Back in your Studio directory (/studio), run the following command to deploy your Sanity Studio.

npx sanity deploy

You have the freedom to deploy your Angular app to your hosting provider of choice. With Vercel and GitHub being a popular choice, we'll cover the basics of that approach.

1. Create a GitHub repository from this project. Learn more.
2. Create a new Vercel project and connect it to your Github repository.
3. Set the Root Directory to your Angular app.
4. Configure your Environment Variables.

Now that you’ve deployed your Angular application and Sanity Studio, you can optionally invite a collaborator to your Studio. Open up Manage, select your project and click "Invite project members"

They will be able to access the deployed Studio, where you can collaborate together on creating content.

• Sanity documentation
• Angular documentation
• Join the Sanity Community
• Learn Sanity