https://github.com/tr11/wagtail-angular-example

An Angular website using the wagtail-graphql app
https://github.com/tr11/wagtail-angular-example

angular graphql wagtail wagtail-graphql

Last synced: 3 months ago
JSON representation

An Angular website using the wagtail-graphql app

• Host: GitHub
• URL: https://github.com/tr11/wagtail-angular-example
• Owner: tr11
• Created: 2019-01-17T01:53:51.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:51:14.000Z (about 2 years ago)
• Last Synced: 2024-07-30T21:01:03.528Z (6 months ago)
• Topics: angular, graphql, wagtail, wagtail-graphql
• Language: TypeScript
• Size: 2.71 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# wagtail-angular-example

This project shows how to to build a simple [Angular](https://angular.io/) app using the [wagtail-graphql](https://github.com/tr11/wagtail-graphql) app. 

## Features

This repo shows how to:

* Request page information from wagtail-graphql as a route fallback

* Load regular Angular pages that rely on the GraphQL API to get data from Wagtail

The points above mean that Angular will try to match any route using the typical route matching, but instead of falling back to a static page, it dynamically creates the route match if the url exits in Wagtail.  

## Configuration

This project relies on the test wagtail project that is part of the `wagtail-graphql` library. It can be found [here](https://github.com/tr11/wagtail-graphql/tree/master/tests/test_project).  To run the Wagtail server:

```shell

python manage.py runserver

```

While the Wagtail server is running, launch this app with

```shell

yarn start

```

or, `npm start` if you use npm.  The two commnads above servet the website at `http://localhost:4200/` and the GraphiQL in-browser IDE at `http://localhost:8000/graphiql` 

## Developing

The project relies on [Angular CLI](https://github.com/angular/angular-cli) -- all the typical instructions using the `ng` command still aplly.