Skip to main content

Serve static pages for a Vuejs frontend

Project description

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)

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-sfp, version 0.7
Filename, size File type Python version Upload date Hashes
Filename, size django-sfp-0.7.tar.gz (3.8 kB) File type Source Python version None Upload date Hashes View hashes

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page