Awesome
A minimal Angular SPA with Sanity Studio
This starter uses Angular for the front end and Sanity to handle its content.
Featuring
- How to fetch content as data from the Sanity Content Lake
- How to render block content with Portable Text
- A Sanity Studio to create and edit content
- How to crop and render images with Sanity Image URLs
Note
This starter features an
/app
and a/studio
folder. The/app
folder contains the frontend code, and the/studio
folder contains the Sanity Studio code.This is not a monorepo setup. We put them both in one repository for the sake of simplicity. You might want to have separate repositories for each of the folders, to make it easier to deploy the app and the studio separately.
This example runs primarly as a Single Page Application and is not suitable for a performant production website. You can look into server- and pre-rendering Angular Universal apps if you plan to make it so.
Prerequisities
- Node.js (v16.12 or later)
- Sanity CLI (optional)
Getting started
The following instructions will take you in both the /app
and /studio
folders.
-
npm install
to install dependencies in both folders -
In the
/studio
folder, runnpm create sanity@latest init --env
(or usesanity init --env
if you have the CLI installed). This will:- ask you to select or create a Sanity project and dataset
- output a
.env
file with appropriate variables
-
Copy your project ID and dataset name to the variables into
/app/src/environments/environments.ts
-
From the
/studio
folder, runnpx sanity cors add http://localhost:4200 --no-credentials
, to allow your app to request data from the browser (Go here to learn more about CORS) -
npm run dev
to start the development servers in both folders
Your Angular app should now be running on http://localhost:4200/ and Studio on http://localhost:3333/.
Feel free to move each folder to its separate location and check them into version control.
Add content
- Visit the Studio and create and publish a new
Post
document - Visit the App and refresh the page to see your content rendered on the page
The schema for the Post
document is defined in the /studio/schemas
folder. You can add more documents and schemas to the Studio to suit your needs.
Deployments
The /app
and /studio
folders are meant to be deployed separately.
Feel free to deploy the App to whichever hosting provider you prefer, like Vercel, Netlify, or Cloudflare Pages.
You can deploy the Sanity Studio by running sanity deploy
in the /studio
repository, provided you have the sanity
package installed globally (npm install --global sanity
). You can also run it with npx sanity deploy
if you don't wish to install the CLI.