django-sfp 0.7

Serve static pages for a Vuejs frontend

Django Sfp
==========

Serve flat pages for a Vuejs frontend

* **Fast**: no database hits
* **Safe**: keep the pages in a version control system
* **Friendly**: edit the pages in an IDE
* **Cache**: client-side cache thanks to [Apollo client](https://www.apollographql.com/)

Installation
------------

``pip install django-sfp``

Configuration
-------------

1. Add ``"sfp",`` to your ``INSTALLED_APPS``

2. Declare the graphql schema in settings:

```python
GRAPHENE = {
'SCHEMA': 'sfp.schema.schema',
}
```

3. Add the graphql endpoint url:

```python
from django.views.decorators.csrf import csrf_exempt
from graphene_django.views import GraphQLView

urlpatterns = [
# ...
url(r'^graphql', csrf_exempt(GraphQLView.as_view())),
]
```

4. Install the frontend:

Grab the `Page.vue` component:

```bash
wget https://raw.githubusercontent.com/synw/django-sfp/master/frontend/src/components/Page.vue
```

Install the dependencies:

```
npm install --save vue-apollo // or vue add apollo if you use vue-cli
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome
```

Font-Awesome is for the spinner loading icon (only this icon will be included in the build,
not the whole lib). Vue-router must be installed

5. Add a frontend generic route:

```javascript
import Page from './path/to/my/components/Page.vue'

routes: [
// ...
{
path: '*',
name: 'Page',
component: Page
},
],
```
To make links: ``<router-link :to="{ name: 'Page', params: { 0: '/myurl' }}"></router-link>``

Usage
-----

Create a ``pages`` in the Django project static directory. Any html file you include there will get served as
a static page.

For example::

* The url ``/about/`` will render ``static/pages/about.html``
* The url ``/about/team/`` will render ``static/pages/about/team.html``

Note: the first line of each file is the title of the page: ex:

```html
My page title
<div>My page content</div>
```

Edit pages online
-----------------

To edit pages at runtime you can use [django-dirtyedit](https://github.com/synw/django-dirtyedit)