Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bstavroulakis/vue-wordpress-pwa
An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps
https://github.com/bstavroulakis/vue-wordpress-pwa
azure es6-javascript offline progressive-web-app pwa pwa-apps pwapp service-worker spa vue vuejs vuejs-components vuejs2 webpack wordpress wordpress-starter-theme wordpress-theme
Last synced: 5 days ago
JSON representation
An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps
- Host: GitHub
- URL: https://github.com/bstavroulakis/vue-wordpress-pwa
- Owner: bstavroulakis
- License: mit
- Created: 2017-03-05T12:15:06.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-12-08T22:03:12.000Z (2 months ago)
- Last Synced: 2025-02-07T22:11:58.633Z (13 days ago)
- Topics: azure, es6-javascript, offline, progressive-web-app, pwa, pwa-apps, pwapp, service-worker, spa, vue, vuejs, vuejs-components, vuejs2, webpack, wordpress, wordpress-starter-theme, wordpress-theme
- Language: JavaScript
- Homepage: https://www.fullstackweekly.com/
- Size: 1.35 MB
- Stars: 699
- Watchers: 39
- Forks: 148
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [vue-wordpress-pwa](https://www.fullstackweekly.com/category/blog)
> An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps
Live version: [https://www.fullstackweekly.com/](https://www.fullstackweekly.com/)
[](https://raw.githubusercontent.com/singapore/renovate/master/license) [](https://travis-ci.org/bstavroulakis/vue-wordpress-pwa) [](https://david-dm.org/bstavroulakis/vue-wordpress-pwa)
[](https://www.fullstackweekly.com/category/blog/) [](https://www.fullstackweekly.com/category/blog/) [](https://www.fullstackweekly.com/category/blog/) [](https://www.fullstackweekly.com/category/blog/)
## Description
This is the code for the [FullStackWeekly](https://www.fullstackweekly.com/) website. You can use it as a starter pack for your WordPress site as well.
Since WordPress can expose a REST API, this project uses Vue.js, Vue-router, Vuex, Vue-resource & Progressive Web App techniques to create an offline-first web client.
You can also fork the project and host it on Azure App Services with continuous integration using the deploy.cmd file (included)
Live version: [https://www.fullstackweekly.com/](https://www.fullstackweekly.com/)
## Getting Started
### Prerequisites
Make sure that [Node v11](https://nodejs.org/en/download/releases/) is installed.
## Features
- Modern JavaScript syntax with [ES6](https://github.com/lukehoban/es6features) via [babel](https://babeljs.io/).
- Module bundler via [webpack](https://webpack.github.io/).
- Components-based architecture via [Vue.js](https://vuejs.org/).
- State management via [Vuex](https://vuex.vuejs.org/en/).
- Cache busting via [file-loader](https://webpack.github.io/)
- Progressive Web App enabled with [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)
- Offline capable with [service workers, app cache](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)
- CSS with [Sass](http://sass-lang.com/)### Instructions
First, install the WordPress plugins to enhance its REST API
- Better REST API Featured Images
- REST API Enabler
- WP REST API - filter fields
- WP REST API - Pure TaxonomiesThen, clone the repo or create a fork
```bash
$ git clone https://github.com/bstavroulakis/vue-wordpress-pwa.git
```Then, edit the config:
```bash
src/app.config.js
```Then, edit the theme, routes and assets:
```bash
src/theme/
src/components/routerTypes.js
src/components/router.js
src/assets
```Finally, to run the project for development with hot reload:
```bash
$ npm install
$ npm run dev
```Or, build the project for production:
```bash
$ npm run build
```### Deployment
Setup a new site on Azure App Services https://[fullstackweekly].azurewebsites.net
and as the path select your forked Github project.Your site should be running on the path you created (https://[fullstackweekly].azurewebsites.net)!
It should work offline as well and with every commit it will deploy the changes to Azure.
Once the user refreshes the site he will receive the new cached version `immediately`.License
MIT