Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fafnur/angular-blog
An example of using Angular and Contentful to create an SSG blog
https://github.com/fafnur/angular-blog
angular blog contentful ssr
Last synced: 8 days ago
JSON representation
An example of using Angular and Contentful to create an SSG blog
- Host: GitHub
- URL: https://github.com/fafnur/angular-blog
- Owner: Fafnur
- Created: 2023-08-02T06:30:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-24T05:13:38.000Z (over 1 year ago)
- Last Synced: 2024-11-28T09:44:18.018Z (2 months ago)
- Topics: angular, blog, contentful, ssr
- Language: TypeScript
- Homepage: https://angular-blog.fafn.ru
- Size: 2.67 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Blog
An example of a static blog on [Angular](https://angular.io/) and [Contentful](https://www.contentful.com/).
Contentful for Angular is a regular API that is no different from any other API. Angulars task in this case is to get the data from the API and display it.
To give Angular SSG properties, a small script was written that receives data from Contentful and generated static pages.
Demo can be viewed here - [angular-blog.fafn.ru](https://angular-blog.fafn.ru).
## Installation
First, you should install vendors:
```bash
yarn
```
After installing the dependencies, the hooks will create the necessary files to run the application. You can run the command yourself:
```bash
yarn env
```
As a result, files will be created:
- apps/blog/.env - Application environments;
- apps/blog/src/app/routes/blog.routes.ts - Generated routes for blog;
- libs/ui/categories/src/lib/categories.ts - Generated categories for blog;
- apps/blog/dynamic-routes.txt - All paths to be passed to the prerender;
## Setup Contentful
For Contentful to work, you need to provide a key and your namespace in apps/blog/.env:
```text
NX_CONTENTFUL_KEY=your-key
NX_CONTENTFUL_SPACE=your-space
```
If you don't have accounts, you can generate mock data:
```bash
yarn mocks
```
## Start the app
To start the development server run `nx serve blog`. Open your browser and navigate to http://localhost:4200.
## Running tasks
For load data and generate blog use command:
```
yarn load
```
For build application with prerender call command:
```
yarn prerender
```
For start server:
```
node dist/apps/blog/server/ru/main.js
```
Targets can be defined in the `package.json`.
## Contact me
- [Habr](https://habr.com/ru/users/fafnur)
- [Medium](https://medium.com/@fafnur)
- [Fafn.ru](https://fafn.ru)