gebeer

Tutorial: Building a simple REST API in ProcessWire

Recommended Posts

Hi @ Fantomas,

On your website you are using a bootstrap css compiled down to only 7kb, so what's inside that is still of some advantage compared to hand coded css ?

 

Share this post


Link to post
Share on other sites

Hi @pwired,

a bit off-topic, but so what...

I use bootstrap to always have the grid and basic options available. Maybe this is not needed on my own page, but maybe I wanted to be prepared to release more content.

Is there a question which packages I use, or should this be an advice to code css without bootstrap?

 

Share this post


Link to post
Share on other sites

Hi Fantomas,

Thanks for jumping in. No it's just that in the past I was obsessed with css grids because I couldn´t code my own css grid. I must have tried all css grids out there. Nowadays, the more I write my own css grid, the less I see the overkill use of a css grid such as bootstrap or uikit, etc. The only use I still see for css grids like bootstrap, uikit, etc. is when you are working together with a group of coders where a consistent way of working is needed on the same project.

Share this post


Link to post
Share on other sites
1 hour ago, AndreasWeinzierl said:

is this tutorial still up to date?

It must be. ProcessWire almost never introduces breaking changes at API level. The API gets additions and bug fixes only.

Share this post


Link to post
Share on other sites
Posted (edited)
7 minutes ago, AndreasWeinzierl said:

best

Tough question 🙂 Have you seen this module? 

Edit:

or this one as another related alternative:

 

Edited by szabesz
added Page Query Boss link
  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, AndreasWeinzierl said:

And it is still the best way to go?

From the API side it is still valid and working code. I don't think there is one best way to go. This tutorial shows one possible approach. There are many different other approaches possible. But at least it shows the basics of implementing a REST API.

You can also have a look at https://modules.processwire.com/modules/rest-api-profile/ which is the most recent approach I'm aware of.

  • Like 3

Share this post


Link to post
Share on other sites

@gebeer It was a great post. Just one addition to what you have written. In case someone has a multilingual website the route to api will become => http://mywebsite.com/en/api/pages/. Notice the addition of language key here (en).

  • Like 1

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 Sten
      Hello,
      I'd like to participate to a documentation about the page flow in PW. I am still a beginner and still have difficulties to see the big picture but I could help to the writing.
      What is the flow when a page is displayed or created ? It would be fine to draw a scheme with every stage in which one can add hooks. Something to describe the flow in time.
      May be it exists.
      page
      |
      fields
      |
      template
      What do you think ?
    • By EyeDentify
      Simple example for loading template specific CSS file.
      This example asumes that you have your CSS file in a directory relative to template root.
      Like:
      templates/css/my_template_specific.css
      Also i use in the template a simple text field to hold the name of the CSS file i want to load.
      I call this field 'css_file'
      Use what you feel comfortable with.
      So in your header section of the DOM notice the "page specific CSS" part?
      Thats were the magic happens. What happens is that we check to see if the file exists in the CSS dir relative to template root.
      And if it does we load it. Simple and effective.
      I load all other CSS that is used all over the site in global_styles.css first.
      And make sure you load template specific last, because then you can easily override CSS in global.
       
      DOM header example:
      <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><?PHP echo($page->title); ?></title> <!-- main CSS --> <link rel="stylesheet" href="<?PHP echo($config->urls->templates); ?>css/global_styles.css"> <!-- page specific CSS --> <?PHP /* Use relative path in file_exists() */ if(file_exists('css/' . $page->css_file)) { echo("<link rel=\"stylesheet\" href=\"{$config->urls->templates}css/{$page->css_file}\">"); } ?> </head> <body> Thats my way of doing it. I am sure there is plenty of more ways to do it. This is for the newbies or anyone that wants more options.
      Good luck with your CSS out there in Cyberspace.
      Cheers from EyeDentify
    • By ARG
      Hello, I am completely new at PW, (and Php) coming from another CMS.  I decided to try to understand the beast, before crafting anything.
      So, I started  from the beginning: the simple web site tutorial.
      I am trying to output the Home page with Head and footer included in. 
      Here is my Home page code:
      include("./includes/head.inc.php"); echo "<h1>{$page->title}</h1>"; include("./includes/scripts.inc.php"); include("./includes/foot.inc.php"); Here is my  Head.inc.php code:
      <?php require_once("./includes/functions.inc.php"); ?> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="<?php echo $pages->get("/site-settings/")->site_meta_description; ?>"> <title><?php echo $pages->get("/site-settings/")->site_meta_description;?></title> <link rel="stylesheet" href="<?php echo $config->urls->templates?>css/simplegrid.css" /> <link rel="stylesheet" href="<?php echo $config->urls->templates?>css/site.css" /> </head> <body> And this the message I got, when I try to view my page:
      Compile Error: require_once(): Failed opening required 'C:/wamp64/www/processwire-master/site/templates/includes/includes/functions.inc.php' (include_path='.;C:\php\pear') (line 1 of C:\wamp64\www\processwire-master\site\assets\cache\FileCompiler\site\templates\includes\head.inc.php)
      Any advice would be helpful
      Thank you for your time.
       
    • By benbyf
      HELLO ALL!
      Context: I use serverpilot to setup and administrate my server patches for my hosted sites. As with many other serving companies, they write tutorials to setup software on their service. I asked them to provide a PW installation instruction and they have obliged however hitting on the following issue on installation with their default linux user:
      Issue:
       
      Basically at the end of the installation there is a warning to secure your config file which could have been done already by the system, I believe they're saying. Is there anything we can do with this, or should i ask them to carry on with the caveat that they should but in a bit of text saying this warning is normal and can be sorted in teh follow ways etc...?
      Interested in people's opinion.
    • By microcipcip
      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.