bstavroulakis / vue-wordpress-pwa Goto Github PK

View Code? Open in Web Editor NEW

696.0 39.0 148.0 1.3 MB

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

Home Page: https://www.fullstackweekly.com/

License: MIT License

JavaScript 54.72% Vue 40.50% HTML 2.92% CSS 0.33% Batchfile 1.53%

vue wordpress offline azure spa service-worker es6-javascript webpack vuejs2 vuejs

vue-wordpress-pwa's Introduction

vue-wordpress-pwa

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

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

Description

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

Getting Started

Prerequisites

Make sure that Node v11 is installed.

Features

Modern JavaScript syntax with ES6 via babel.
Module bundler via webpack.
Components-based architecture via Vue.js.
State management via Vuex.
Cache busting via file-loader
Progressive Web App enabled with service workers
Offline capable with service workers, app cache
CSS with Sass

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 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.js
src/components/router.js
src/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

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

vue-wordpress-pwa's People

Contributors

Stargazers

Watchers

Forkers

cuulee drunkod cybmeta k33n jneto81 rafaesc itorets athiwatp oligoform partikelir davinirjr vuejsvn kilinkis zmmzmmz pdey hu19891110 abacram iamahless sustainablecommunitydevelopmenthub pppwebapp travismullen kitisak roryheaney alegadpen forngo thechrise immanuelsun bobwol fr0stbytes hoangpq elpuas frankwrk oakraven ptcmariano dallington mangemannen66 shekohex mikewlange sakho3600 youngkwangk aboobala rob-rychs webdesign29 jwtp wcxaaa ptblank guoyu07 captake itmyprofession baringji sumanchoudhury kostaonguard cloudguy007 johfermq cocolees oion dfraser74 appandgo williamukoh developdaly victornery ariellephan ryoraspp juicee-io darkgreising princedhimanz artur-swoboda thomasperdana wahidmounir ggpixel vfoxitchick medn-dev minhnhut0602 odinndev narci2010 zanuarmirza nenadspasic firmantr3 iancom zmilan jdiver12 xerstrok fxw chineseengineer hiooyui erichuang2015 toantrongnguyen adegbengaagoro rfliu2013 sfjadi2010 kharysharpe reguengos 715047274 schnells 216giorgiy gannyril svrcore mohcinenazrhan xdevelopers jialingling

vue-wordpress-pwa's Issues

When loading a new category/ post remove the old data until the new one is obtained.

When you load a category/ post the old data is shown until the new data is loaded which makes it a bit confusing.

offline

offline mode don't work

Dependency deprecation warning: purifycss (npm)

On registry https://registry.npmjs.org/, the "latest" version (v1.2.6) of dependency purifycss has the following deprecation notice:

Please use purify-css instead

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about purifycss's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

code differences from documentation...

Hi, and thanks for this awesome project. I want to use it as a basis for learning a little about vue.js and I have started to set it up and point it to my WP blog, but I am running into a few issues:

many places in the code refer to components that are don't seem to exist. ...I followed the instructions, but did I check out the wrong github repo?
The documentation likewise refers to changing things that don't exist in the tree I checked out.

Thanks!

Confirm Wordpress plugins

Can you confirm the plugin adresses

Better REST API Featured Images
https://wordpress.org/plugins/better-rest-api-featured-images/
Category Order
??
REST API Enabler
https://wordpress.org/plugins/rest-api-enabler/
WP REST API - filter fields
https://wordpress.org/plugins/rest-api-filter-fields/
WP REST API - Pure Taxonomies
https://wordpress.org/plugins/wp-rest-api-pure-taxonomies/
WP-CORS
https://wordpress.org/plugins/wp-cors/

Wasn't sure on which Category Order plugin you were using

Dependency deprecation warning: babel-preset-es2015 (npm)

On registry https://registry.npmjs.org/, the "latest" version (v6.24.1) of dependency babel-preset-es2015 has the following deprecation notice:

🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about babel-preset-es2015's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

Flash of cached data

Hey Bill -

I downloaded your repository and changed the API URL and it's working nicely, except when I refresh the page I see your menu instead of mine for a split second. Is this something to do with the cache?

Thanks!

Error when deploying to Azure

Hi,

I tried deploying this is Azure but got some errors.

Basically I setup an App Service in Azure
I used the Web App option using Linux OS.
Runtime Stack I used is Node.js v9.4

Here's the errors I got when deploying:

/home/site/repository/build/deploy.cmd: line 1: call: command not found
/home/site/repository/build/deploy.cmd: line 2: IF: command not found
/home/site/repository/build/deploy.cmd: line 4: call: command not found
/home/site/repository/build/deploy.cmd: line 5: IF: command not found
/home/site/repository/build/deploy.cmd: line 7: syntax error near unexpected token `%%D'
/home/site/repository/build/deploy.cmd: line 7: `for /d %%D in (%DEPLOYMENT_TARGET%\*) do ('
/home/site/repository/build/deploy.cmd: line 1: call: command not found\n/home/site/repository/build/deploy.cmd: line 2: IF: command not found\n/home/site/repository/build/deploy.cmd: line 4: call: command not found\n/home/site/repository/build/deploy.cmd: line 5: IF: command not found\n/home/site/repository/build/deploy.cmd: line 7: syntax error near unexpected token `%%D'\n/home/site/repository/build/deploy.cmd: line 7: `for /d %%D in (%DEPLOYMENT_TARGET%\*) do ('\n/opt/Kudu/bin/Scripts/starter.sh build/deploy.cmd

Sorry I'm new to this so not sure if I did something wrong.

Yoast Seo or SEO support

Hello,

I was wondering if this client is already SEO optimized? Would it work with Yoast SEO or similar plugins?

Thank you for your time

Join VueFront

Hi @bstavroulakis

Congrats on the amazing work you have done. We are doing something very similar to yours, but with the idea of being CMS agnostic via a GraphQL api.

If you are interested and would like to participate in our project, please visit our Discord at https://discordapp.com/invite/C9vcTCQ

Looking forward to hearing from you!

Make this project work as a Wordpress theme as well

It would be nice if this project could work as a Wordpress theme. Probably not many changes but a functions.php to handle routing and page loading. It can still use the Wordpress API.

Error in render function: "TypeError: Cannot read property 'Link' of undefined"

Hi I am getting this error in the console. None of my individual posts were loading (although the main category group was) until I removed this line from vwpSingle.vue:

<a :href="single.rest_api_enabler.Link" target="_blank">{{single.rest_api_enabler.Link}}</a>

Any pointers on where I might look to fix this?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

chore(deps): pin dependencies (@babel/core, @babel/preset-env, babel-cli, babel-core, eslint-config-standard, eslint-loader, eslint-plugin-html, eslint-plugin-import, eslint-plugin-node, eslint-plugin-promise, eslint-plugin-standard, eslint-plugin-vue, extract-text-webpack-plugin, mini-css-extract-plugin, webpack-cli)
fix(deps): update dependency cross-env to v5.2.1
chore(deps): update dependency md5 to v2.3.0
chore(deps): update dependency rimraf to v2.7.1
chore(deps): update dependency sass-loader to v7.3.1
chore(deps): update dependency webpack to v4.47.0
chore(deps): update dependency webpack-dev-middleware to v3.7.3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm

package.json

axios 0.18.0

bulma 0.7.4

compression 1.7.4

cross-env 5.2.0

express 4.16.4

intersection-observer-polyfill 0.1.0

localforage 1.7.3

lru-cache 5.1.1

serialize-javascript 1.7.0

vue 2.6.10

vue-clazy-load 0.4.2

vue-resource 1.5.1

vue-router 3.0.6

vue-server-renderer 2.6.10

vue-style-loader ^4.1.2

vuex 3.1.0

vuex-router-sync 5.0.0

@babel/core ^7.4.3

@babel/preset-env ^7.4.3

babel-cli ^6.26.0

babel-core ^6.26.3

babel-eslint 10.0.1

babel-loader 8.0.5

css-loader 2.1.1

eslint 5.16.0

eslint-config-standard ^12.0.0

eslint-loader ^2.1.2

eslint-plugin-html ^5.0.3

eslint-plugin-import ^2.17.2

eslint-plugin-node ^8.0.1

eslint-plugin-promise ^4.1.1

eslint-plugin-standard ^4.0.0

eslint-plugin-vue ^5.2.2

extract-text-webpack-plugin ^4.0.0-beta.0

file-loader 3.0.1

fs-extra 7.0.1

html-webpack-plugin 3.2.0

md5 2.2.1

mini-css-extract-plugin ^0.6.0

node-sass ^4.11.0

purify-css 1.2.6

purifycss 1.2.6

purifycss-webpack 0.7.0

recursive-readdir 2.2.2

rimraf 2.6.3

sass-loader 7.1.0

serve-favicon 2.5.0

url-loader 1.1.2

vue-loader 15.7.0

vue-template-compiler 2.6.10

webpack 4.30.0

webpack-cli ^3.3.1

webpack-dev-middleware 3.6.2

webpack-hot-middleware 2.24.4

fsevents *

travis

.travis.yml

node 11

Check this box to trigger a request for Renovate to run again on this repository

Server-Side Rendering

Include Server-Side Rendering maybe.

Unsure how to Adapt to Wordpress install

Hi, I'm attempting to adapt this to one of my wordpress installs and it's not clear how to exactly do that. Any help would be greatly appreciated.