Jump to content
microcipcip

Vue 2.0 boilerplate for ProcessWire 3.0

Recommended Posts

Hi, I have created a site profile that shows how to integrate ProcessWire 3.0 with Vue 2.0. See repository here.

 

How this site profile works

This ProcessWire site profile is loosely based on the REST API tutorial by @gebeer. Here are the most important steps to reproduce it:

 

Admin settings

  • Create an api template with default settings and just the title field assigned to it. Refer to @gebeer tutorial for further details

  • Create a pages and nav templates with just the title field, for both template tick “Allow URL Segments” in the “URLs” tab (see attachment)

  • Create a home template, this is going to be the single php file that will load your Vue SPA. Assign this template to the root of your website

  • Any other template you create should have the “Alternate Template Filename” field in the “Files” tab set as home (see attachment), in this way if a user enter the website from any url that is not the root, ProcessWire will always redirect to the home template, Vue router will handle the url and call the right data through the REST API

  • Under the root, create an api page and assign the api template to it (you can set “hidden” to this page so doesn't show up in the menu)

  • Under the api page, create the pages nav and pages (see attachment), and assign the templates nav and pages to them. Now you have the www.sitename.com/api/pages and www.sitename.com/api/nav urls that you can use to fetch the JSON data

 

PHP template setup

  • In the templates folder, create home.php file and leave it empty, the HTML will be generated by webpack

  • Now create pages.php and nav.php files. On these files is where we return the JSON data, based on the right url segment. Again, refer to @gebeer tutorial for further details on this matter. Note that I wrote a PageFields class that I use on these templates to fetch ProcessWire fields. The fields that are supported are text, textarea, repeater, img. Other fields may work but I haven't tested them. See the REST API setup for further details about how to use the PageFields class


REST API setup

You can decide what fields are included and what fields are excluded by passing a configuration array to the PageFields class. You can find here a list of the available configuration settings. See examples below.

 

  • Show only selected core fields:
    $pageFields = new PageFields($p, [
      'fld_core_included' => ['url', 'httpUrl', 'template']
    ]);

     

  • Show no global fields, and only selected custom fields:

    $pageFields = new PageFields($p, [
      'fld_core_included' => [],
      'fld_include_all' => false,
      'fld_included' => ['title', 'gallery'],
    ]);

     

  • On a gallery image field, hide breakpoint listing and show only httpUrl field:

    $pageFields = new PageFields($p, [
      'img_fld_overrides' => [
        'gallery' => [ 'fields' => ['httpUrl'], 'bp_list' => false ]
      ],
    ]);

     

Webpack setup

The most important file of all Webpack setup is config/index.js. On line 33 you need to provide your domain name so that Webpack can proxy the ProcessWire REST API to the Webpack dev server. Without this you wouldn't be able to take advandage of the Webpack hot module replacement feature which allows you to reload a vue module without refreshing the page, it also allows you to keep the state of the app.

 

Notes

My REST API may have bugs, this is just an example of an integration with ProcessWire, I suggest you either build your own REST API or use the awesome GraphQL module by @Nurguly Ashyrov.


Todo

Replace REST API with the GraphQL module. This requires vue-apollo, the Apollo/GraphQL integration with Vue, and vue-supply for integration with Vuex.

 

 

  • Like 21
  • Thanks 1

Share this post


Link to post
Share on other sites

Cool stuff, @microcipcip!

Please do write a tutorial when you have time. I am sure it will be useful to many of us in the community. Surely it will be for me :rolleyes:.

It seems like your boilerplate is not in a site profile format. Is there a reason for that? If not, consider using it, as it is a common way to distribute site boilerplate code and could make your work easier to reuse for PW people.

  • Like 3

Share this post


Link to post
Share on other sites

@Ivan Gretsky Is there a way to customize the export or should I just edit the zip file and remove /node_modules/ and add all the config files that start with a dot that have been removed?

Share this post


Link to post
Share on other sites

Hey, @microcipcip! I actually do not know if it is possible to do with the profile exporter via setting . Though I am sure it should be.

Removing node_modules should be easy - you can do it before the export (or temporary prefix the folder with a dot :rolleyes:). Adding .config type files is probably only possible the way you suggest.

But as I said I think all those things should be eventually possible to do with the module options, as it is very powerful way to share one's work in PW. Please list the issues you cannot overcome in the module support board or even better on github.

Edit: Seems like a .file issue is already present. I am going to add my voice to it. Please do too if you think it deserves it.

Edited by Ivan Gretsky
  • Like 2

Share this post


Link to post
Share on other sites

I have edited the github repository, now ProcessVue is a site profile and you can install it easily. Just note that the REST API may have bugs...I don't even remember how it works :rolleyes:

  • Like 6
  • Haha 1

Share this post


Link to post
Share on other sites

Just wanted to say thanks for your work. You and @Nurguly Ashyrov are the people with projects who made me interested in ProcessWire. This outdated website doesn't give the best impression, but after a few FAQs and your threads, man am I interested. 

  • Like 4

Share this post


Link to post
Share on other sites

I am glad that this project is helping ProcessWire getting more devs on board :). I just want to say that I wouldn't have been able to finish ProcessVue if it wasn't for the amazing ProcessWire community. I believe that the community truly is the biggest selling point for new users (like me). Before trying ProcessWire I used OctoberCMS for a while but when I was stuck I got 0 support from the forums, so...althought the CMS is based on the amazing Laravel framework, I just left!

I think that ProcessWire is extremely powerful and flexible and with time will become the tool of choice for frontend developers, the new GraphQL module will also help on this direction. Droves of frontend developers are looking for a CMS like this, they just don't know it exists! The usual keywords they use when looking for a SPAs CMS is "Decoupled CMS" or "Headless CMS", and I believe that that's exactly what ProcessWire is for!

Some frontend developers prefer to use NodeJS, but the learning curve is huge if you need it for a non trivial project, and the worst thing of all is that after two weeks ANY js tool you may have used is outdated. See for example how Angular has been replaced with React or Vue, and Gulp with Webpack. That doesn't mean that I am against improvements in this regard, I just feel that it's just too much for us poor frontend devs to cope with! ProcessWire is stable, easy to use and won't change API every week.

BTW, after that I migrate ProcessVue to GraphQL I am also planning to add Auth0 login integration with JWT, as I think that login/signup is a common feature in SPAs. I am sure I'll have to annoy @Nurguly Ashyrov and the rest of ProcessWire community for getting it in sync with ProcessWire users, but the result should be quite useful :)

  • Like 17

Share this post


Link to post
Share on other sites

Hi @microcipcip - thanks for a really great commentary on PW, what frontend devs are looking for, and how PW can fit those needs.

I am really excited to see your integration of GraphQL into your ProcessVue site profile - definitely planning on using it on an upcoming project.

Thanks again for all your great work on this.

  • Like 5

Share this post


Link to post
Share on other sites

Thanks @thomasaull :) ATM I am waiting for GraphQL module support for RepeaterFields before I integrate it in processvue. I'll implement the JWT login later on because I haven't used it before so I need to learn how it works, but it is definitely on my list of things to do. I don't know how JWT should integrate with GraphQL too, I'll probably ask @Nurguly Ashyrov if he has any idea of how I should integrate it.

There's also the problem that GraphQL allows you way too much freedom on what kind of query you can perform on the client, to prevent that I've got to implement persisted queries.

  • Like 3

Share this post


Link to post
Share on other sites

Sounds good. I recently read some stuff about JWT, maybe I'm gonna give it a shot trying to implement it with a default REST Api… Not sure if I got the time though…

This articles has some overview info: https://www.sitepoint.com/php-authorization-jwt-json-web-tokens/
And this is a library for doing the stuff in PHP: https://github.com/firebase/php-jwt

  • Like 2

Share this post


Link to post
Share on other sites

Thanks @thomasaull that would be great! There is an amazing new tutorial https://auth0.com/blog/vuejs2-authentication-tutorial/ if you don't mind having the users saved on Auth0. After all, Auth0 is the company behind the JWT website so they should implement it properly and you can obviosuly still keep all users in sync with ProcessWire db. But regarding Rest API I'd rather use GraphQL instead because that seems more flexible.

  • Like 2

Share this post


Link to post
Share on other sites

Thx for the hint to this tutorial @microcipcip and sry for my late reply. No progress so far… 🙈 Storing the users at an external server is no option in this case, but maybe there's usefull stuff in there anyway ;)

GraphQL seems to be really nice, but I'm not sure if it's to early to adopt it. If, the way to go seems to use the Vue-Apollo: https://github.com/Akryum/vue-apollo
Any other pointers from your side? :)

Share this post


Link to post
Share on other sites
On 30/05/2017 at 11:27 AM, thomasaull said:

Any other pointers from your side? :)

No, whichever way you choose I think that a login process with Vue will be greately appreciated by the community :)

Share this post


Link to post
Share on other sites

I get an error with a clean install when I run "npm i"

Error: Cannot find module '/home/goac/mywebsitehere/site/templates/client/node_modules/node-sass/scripts/install.js'
    at Function.Module._resolveFilename (module.js:469:15)

 

Share this post


Link to post
Share on other sites
17 hours ago, joer80 said:

I get an error with a clean install when I run "npm i"


Error: Cannot find module '/home/goac/mywebsitehere/site/templates/client/node_modules/node-sass/scripts/install.js'
    at Function.Module._resolveFilename (module.js:469:15)

 

That is unlikely an error with the ProcessVue template. Are you using Ubuntu? I found this thread with a similar problem where they fixed it by using the "--unsafe-perm" flag during "npm i", so basically you'd have to run it with this command: "npm --unsafe-perm i". Edit: from that thread it seems that the user you're using may not have the right write permissions.

  • Like 1

Share this post


Link to post
Share on other sites
6 hours ago, microcipcip said:

That is unlikely an error with the ProcessVue template. Are you using Ubuntu? I found this thread with a similar problem where they fixed it by using the "--unsafe-perm" flag during "npm i", so basically you'd have to run it with this command: "npm --unsafe-perm i". Edit: from that thread it seems that the user you're using may not have the right write permissions.

 

When I login as root and run npm i it says:

npm WARN prefer global node-gyp@3.6.2 should be installed with -g

> node-sass@4.5.3 install /home/goac/vue.greggorrauto.com/site/templates/client/node_modules/node-sass
> node scripts/install.js

module.js:471
    throw err;
    ^

Error: Cannot find module '/home/goac/websitehere/site/templates/client/node_modules/node-sass/scripts/install.js'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:504:3

 

On Centos

Share this post


Link to post
Share on other sites

Its working now!  I think the "npm --unsafe-perm" i did it!

  • Like 1

Share this post


Link to post
Share on other sites
12 hours ago, joer80 said:

Its working now!  I think the "npm --unsafe-perm" i did it!

Glad you got it working :)

Share this post


Link to post
Share on other sites

Is this thread still active? I have developed a couple of Processwire sites, and I use Npm, Stylus, Webpack, and Wamp64 for development. However, I cannot make sense of your Github installation directions. Here is my first stop point:

Quote

Load the URL to your ProcessWire installation in your browser to initiate the installer. Select the "ProcessVue" profile from the dropdown when prompted to do so. The installer will take care of the rest.

My browser loads my Processwire installation from only two places, my site directory, or the PW admin site. How do you get it to load somewhere else? What "dropdown"?

I am relatively new to PW. I like it, but I must be missing something. A lot of the docs are like " How to draw an owl: First draw two circles. Then draw the rest of the owl. Congratulations."

Share this post


Link to post
Share on other sites

Thanks. I thought the OP was talking about some self-installer in the site-processvue folder. I didn't realize it required a whole re-install of Processwire.

Share this post


Link to post
Share on other sites
On 08/09/2017 at 2:41 PM, rocket said:

Thanks. I thought the OP was talking about some self-installer in the site-processvue folder. I didn't realize it required a whole re-install of Processwire.

AFAIK this is the way ProcessWire theme install works. If you want you can install it manually but it will require more time, you have to follow the instructions in the first post of this thread.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Gadgetto
      SnipWire - Snipcart integration for ProcessWire
      Snipcart is a powerful 3rd party, developer-first HTML/JavaScript shopping cart platform. SnipWire is the missing link between Snipcart and the content management framework ProcessWire.
      With SnipWire, you can quickly turn any ProcessWire site into a Snipcart online shop. The SnipWire plugin helps you to get your store up and running in no time. Detailed knowledge of the Snipcart system is not required.
      SnipWire is free and open source licensed under Mozilla Public License 2.0! A lot of work and effort has gone into development. It would be nice if you could donate an amount to support further development:

      Status update links (inside this thread) for SnipWire development
      2020-04-06 -- SnipWire 0.8.6 (beta) released! Adds support for Snipcart subscriptions and also fixes some problems 2020-03-21 -- SnipWire 0.8.5 (beta) released! Improves SnipWires webhooks interface and provides some other fixes and additions 2020-03-03 -- SnipWire 0.8.4 (beta) released! Improves compatibility for Windows based Systems. 2020-03-01 -- SnipWire 0.8.3 (beta) released! The installation and uninstallation process has been heavily revised. 2020-02-08 -- SnipWire 0.8.2 (beta) released! Added a feature to change the cart and catalogue currency by GET, POST or SESSION param 2020-02-03 -- SnipWire 0.8.1 (beta) released! All custom classes moved into their own namespaces. 2020-02-01 -- SnipWire is now available via ProcessWire's module directory! 2020-01-30 -- SnipWire 0.8.0 (beta) first public release! (module just submitted to the PW modules directory) 2020-01-28 -- added Custom Order Fields feature (first SnipWire release version is near!) 2020-01-21 -- Snipcart v3 - when will the new cart system be implemented? 2020-01-19 -- integrated taxes provider finished (+ very flexible shipping taxes handling) 2020-01-14 -- new date range picker, discount editor, order notifiactions, order statuses, and more ... 2019-11-15 -- orders filter, order details, download + resend invoices, refunds 2019-10-18 -- list filters, REST API improvements, new docs platform, and more ... 2019-08-08 -- dashboard interface, currency selector, managing Orders, Customers and Products, Added a WireTabs, refinded caching behavior 2019-06-15 -- taxes provider, shop templates update, multiCURL implementation, and more ... 2019-06-02 -- FieldtypeSnipWireTaxSelector 2019-05-25 -- SnipWire will be free and open source Plugin Key Features
      Fast and simple store setup Full integration of the Snipcart dashboard into the ProcessWire backend (no need to leave the ProcessWire admin area) Browse and manage orders, customers, discounts, abandoned carts, and more Multi currency support Custom order and cart fields Process refunds and send customer notifications from within the ProcessWire backend Process Abandoned Carts + sending messages to customers from within the ProcessWire backend Complete Snipcart webhooks integration (all events are hookable via ProcessWire hooks) Integrated taxes provider (which is more flexible then Snipcart own provider) Useful Links
      SnipWire in PW modules directory SnipWire Docs (please note that the documentation is a work in progress) SnipWire @GitHub (feature requests and suggestions for improvement are welcome - I also accept pull requests) Snipcart Website  
      ---- INITIAL POST FROM 2019-05-25 ----
       
    • By louisstephens
      Just wanted to put it on everyone's radar that VueMastery is having a free weekend starting today at (12 ET). All videos in every course are free to watch until Sunday at midnight.
      Cheers!
    • By Kiwi Chris
      I don't really have anything public to show, as nearly all the work is back-end, but I thought I'd post here anyway as it's a pretty good example of just how powerful Processwire can be.
      About a year ago, I inherited an incomplete Craft website made by a designer. Apart from the usual company information site, it was supposed to provide a customer portal for clients of a wine bottling company to make bookings for production runs.
      Data for stock levels of goods like bottles and labels was to come from an inventory management system Unleashed https://www.unleashedsoftware.com/
      Unleashed provides a REST API, so I had to integrate with that first by writing an API integration module, and then ended up using Processwire's core lazy cron module to periodically pull data from Unleashed using a custom module.
      The booking forms have a lot of conditional fields, eg if you are bottling a given wine variety, you should only be able to select labels that match that variety. All this conditional stuff was achieved with a lot of additions to ready.php.
      I also needed to be able to created a predefined set of pages when a new user is added if they have a 'client' role. Once again, more hooking in ready.php
      I've used the Admin Restrict Branch module so clients can only see their own records when they're logged in, but staff can see all records.
      Lister Pro provides the ability to search and view completed production runs.
      Part way through the project, as the client was happy with the way things were going, I was asked to add in logistics and dispatch which is provided by another company, which also runs Unleashed with a separate set of data, and with some clients who don't bottle wine, but will end up using the same portal, so using the roles and permissions inherent in Processwire, I set up production templates with separate roles to dispatch templates, so I could easily have clients assigned access to just the templates they need.
      Tracey Debugger got a thorough workout along the way, and the debugger console is an absolute killer tool for making quick changes to data when updating a live site to match changes from the dev site.
      At the start of this project, I'd used Processwire quite a bit, but never dived into module development or hooking, but I've now ended up with a reasonable idea how they work.
      @bernhard has produced some excellent tutorials which I found really helpful figuring out how to create modules, and other people like @Robin S have answered questions when I've got stuck. @ryan himself has been helpful when I've been trying to do things that push either the limits of my knowledge or Processwire or both 😋  .
      Could I have done this with other tools? Depends. Wordpress would have been as useless as using petrol to fight a fire, however something like ASP.Net COULD have done the job but would have probably made things a lot more complicated. In parallel, I've been working on building a REST API with ASP.Net for another client to integrate with an existing SQL Server database, and I've found that Visual Studio is inclined to break projects quite regularly, with dependencies getting messed up, or even whole configuration files getting corrupted when it has a hissy fit, so working with Processwire is a pleasure in comparison.
       
    • By Demo
      Hi,
      I'm a newbie to Process wire. I'm trying to pass the form values to a different URL (i.e to sales force). We have a RestAPI to do a post method with URL Prams. when we tested the rest API it works with static values. So, i select the the option called submit to another URL in actions tab in my form. 
      So now the issue is how can i pass the field values dynamically to the REST API prams on form submit?
       
      If their is any easy way to submit form details to sales force please advice.
       
      Thanks in advance!! 

    • By thomasaull
      I recently started to build Vue SPAs with ProcessWire as the backend, connected with a REST API. Thanks to code and the help of @LostKobrakai (How to use FastRoute with ProcessWire) and @clsource (REST-Helper) I got it up and running pretty quickly and now have put all of it in a site profile for others to use. It includes the REST API with routing for different endpoints, JWT Auth and a simple Vue SPA which shows the process of logging in a user (nevertheless, you don't have to use the Vue part, the API will work on it's own).
      Check it out here: https://github.com/thomasaull/RestApiProfile
      I'm pretty sure, it's not the perfect or most sophisticsted solution, but it gets the job done for me…
      Feedback or Improvements are very welcome
      Update: This site profile is a module now: https://github.com/thomasaull/RestApi
×
×
  • Create New...