Repository files navigation

An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps

Live version:https://www.fullstackweekly.com/

This is the code for theFullStackWeekly 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/

Make sure thatNode v11 is installed.

• Modern JavaScript syntax withES6 viababel.
• Module bundler viawebpack.
• Components-based architecture viaVue.js.
• State management viaVuex.
• Cache busting viafile-loader
• Progressive Web App enabled withservice workers
• Offline capable withservice workers, app cache
• CSS withSass

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 Taxonomies

Then, clone the repo or create a fork

$ git clone https://github.com/bstavroulakis/vue-wordpress-pwa.git

Then, edit the config:

src/app.config.js

Then, edit the theme, routes and assets:

src/theme/src/components/routerTypes.jssrc/components/router.jssrc/assets

Finally, to run the project for development with hot reload:

$ npm install$ npm run dev

Or, build the project for production:

$ npm run build

Setup a new site on Azure App Services https://[fullstackweekly].azurewebsites.netand 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 versionimmediately.

License

MIT