https://github.com/agility/agilitycms-angular-blog
Sample Angular 11 blog with Agility CMS. You can use this as a starting point to build a fully-featured Angular App with a headless cms like Agility.
https://github.com/agility/agilitycms-angular-blog
agility angular cms headless
Last synced: about 2 months ago
JSON representation
Sample Angular 11 blog with Agility CMS. You can use this as a starting point to build a fully-featured Angular App with a headless cms like Agility.
- Host: GitHub
- URL: https://github.com/agility/agilitycms-angular-blog
- Owner: agility
- Created: 2021-02-16T01:49:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-12T18:36:36.000Z (about 4 years ago)
- Last Synced: 2025-02-14T04:51:15.059Z (4 months ago)
- Topics: agility, angular, cms, headless
- Language: TypeScript
- Homepage: https://agilitycms-angular-blog.netlify.app/
- Size: 309 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Agility CMS + Angular -> Blog
This is a sample Angular 11 blog with Agility CMS. You can use this as a starting point to build a fully-featured Angular App with a headless cms like Agility.
### Builds:
- Preview: https://agilitycms-angular-blog-preview.netlify.app/
- [](https://app.netlify.com/sites/agilitycms-angular-blog-preview/deploys)
- Production: https://agilitycms-angular-blog.netlify.app/
- [](https://app.netlify.com/sites/agilitycms-angular-blog/deploys)
## Getting Started
Angular and Agility CMS, also TypeScript? Oh ya, let's go!
### Agility CMS Account
The first thing you need is a free Agility CMS account. [You can get that here 👋](https://manager.agilitycms.com/org/subscriptions/instance-setup?template=jamstack-blog&plan=agility-free).
Once you create your Agility CMS account and ✨new✨ project name, come back here 🧐.
### Clone the Repo
Now that you've got the **content**, *you need the `code`!*
Go ahead and clone the repo from github: 👇
```shell
https://github.com/agility/agilitycms-angular-blog.git
```
### Install Dependencies
`npm install` or `yarn install`
Normally, this will create 9,999,999,999 files in your `node_modules` folder. Luckily, we're only gonna create 9,999,999 for this small demo.
YAY! 👏👏👏
### Environment Variables
You care about the environment don't you? 🌲🌳🌴🎋
Either way, you're gonna need to grab a few variables from your Agility CMS account. Head over to the [API Keys page](https://manager.agilitycms.com/settings/apikeys) in Agility CMS (https://manager.agilitycms.com/settings/apikeys) and grab your GUID, and API Keys for Preview and Fetch.
- Open up your `src/environments` folder
- Overwrite the values in the `environment.ts` file.
- 🗄 Use your PREVIEW KEY for the API Key.
- Overwrite the values in the `environment.prod.ts` file
- 🗄 Use your FETCH KEY for the API Key.
## Development server
Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
This will also load the latest (staging mode) content from Agility CMS. When you change content in the CMS, simply reload your page to see those changes updated in the site.
### Agility Service
Agility CMS content is loaded using methods in the `agility/agility.service.ts` class.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
Agility CMS modules are named `module-[module_name]`, and are also registered in the `agility/module.service.ts` file, indexed by the module reference name in lower case. Each module component implements `IAgilityModuleComponent` with a special `data` input property that has the content for that module.
Check out the examples we've provided to learn more!
## Build
Run `npm run dev` to build the project in preview mode. The build artifacts will be stored in the `dist/` directory.
Run `npm run build` flag for a production build.
## Further help
### Angular
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
### Agility CMS
To get help with Agility CMS, reach out to us on our website https://agilitycms.com