-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cbe864e
commit 125b661
Showing
1 changed file
with
45 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,62 @@ | ||
| # Agility CMS + Angular -> Blog | ||
| # Agility CMS & Angular Starter | ||
|
|
||
| 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. | ||
| New to Agility CMS? [Sign up for a FREE account](https://agilitycms.com/free) | ||
|
|
||
| ### Builds: | ||
| [Introduction to Angular and Agility CMS](https://help.agilitycms.com/hc/en-us/articles/360056766852) | ||
|
|
||
| - Preview: https://agilitycms-angular-blog-preview.netlify.app/ | ||
| ## About This Starter | ||
| - Angular is a popular platform and framework maintained by Google for building single-page client applications using HTML and TypeScript. | ||
| - Supports full [Page Management](https://help.agilitycms.com/hc/en-us/articles/360055805831). | ||
| - Supports Preview Mode. | ||
|
|
||
| - [](https://app.netlify.com/sites/agilitycms-angular-blog-preview/deploys) | ||
| ### Tailwind CSS | ||
|
|
||
| - Production: https://agilitycms-angular-blog.netlify.app/ | ||
| - [](https://app.netlify.com/sites/agilitycms-angular-blog/deploys) | ||
| This starter uses [Tailwind CSS](https://tailwindcss.com/), a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. | ||
|
|
||
| ## 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 | ||
| It also comes equipped with [Autoprefixer](https://www.npmjs.com/package/autoprefixer), a plugin which use the data based on current browser popularity and property support to apply CSS prefixes for you. | ||
|
|
||
| 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. | ||
| ## Getting Started | ||
|
|
||
| Check out the examples we've provided to learn more! | ||
| To start using the Agility CMS & Angular Starter, [sign up](https://agilitycms.com/free) for a FREE account and create a new Instance using the Blog Template. | ||
|
|
||
| ## Build | ||
| ### Setting up the Starter | ||
|
|
||
| Run `npm run dev` to build the project in preview mode. The build artifacts will be stored in the `dist/` directory. | ||
| 1. cd into the `src/environments` directory. | ||
| 2. Overwrite the values in the `environment.ts` file using your Preview API Key. | ||
| 4. Overwrite the values in the `environment.prod.ts` file using your Fetch API Key. | ||
|
|
||
| Run `npm run build` flag for a production build. | ||
| You can get these values from the API Keys page in [Agility Settings](https://manager.agilitycms.com/settings/apikeys). | ||
|
|
||
| ## Further help | ||
| ## Running the Site Locally | ||
| - `npm run start` => Starts your development environment. | ||
| - `npm run build` => Builds your production enviornment. | ||
|
|
||
| ### Angular | ||
| ## How It Works | ||
| - [How Pages Work](https://help.agilitycms.com/hc/en-us/articles/4403477298701) | ||
| - [How Page Modules Work](https://help.agilitycms.com/hc/en-us/articles/4403477635853) | ||
| - [How To Fetch Additional Data in Page Modules](https://help.agilitycms.com/hc/en-us/articles/4403478652301) | ||
|
|
||
| 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. | ||
| ## Resources | ||
|
|
||
| ### Agility CMS | ||
| - [Official site](https://agilitycms.com) | ||
| - [Documentation](https://help.agilitycms.com/hc/en-us) | ||
|
|
||
| To get help with Agility CMS, reach out to us on our website https://agilitycms.com | ||
| ### Angular | ||
| - [Official site](https://angular.io/) | ||
| - [Documentation](https://angular.io/docs) | ||
|
|
||
| ### Tailwind CSS | ||
| - [Official site](http://tailwindcss.com/) | ||
| - [Documentation](http://tailwindcss.com/docs) | ||
|
|
||
| ### Community | ||
| - [Official Slack](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI) | ||
| - [Blog](https://agilitycms.com/resources/posts) | ||
| - [GitHub](https://github.com/agility) | ||
| - [Forums](https://help.agilitycms.com/hc/en-us/community/topics) | ||
| - [Facebook](https://www.facebook.com/AgilityCMS/) | ||
| - [Twitter](https://twitter.com/AgilityCMS) | ||
|
|
||
| ## Feedback and Questions | ||
| If you have feedback or questions about this starter, please use the [Github Issues](https://github.com/agility/agilitycms-angular-starter/issues) on this repo, join our [Community Slack Channel](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI) or create a post on the [Agility Developer Community](https://help.agilitycms.com/hc/en-us/community/topics). |
125b661There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: