Recently Browsing 0 members
No registered users viewing this page.
The Architekturführer Köln is a guidebook and now a web application about architectural highlights in Cologne, Germany. It contains detailled information about around 100 objects (architectural landmarks) in Cologne. The web app offers multiple ways to search through all available objects, including:
The app is built with the Vue framework and compiled with Webpack 4. As a learning exercise and for greater customizability we opted to not use Vue CLI, and instead wrote our own Webpack config with individually defined dependencies.
The site is a SPA (Single Page Application), which means all internal links are intercepted by the Vue app and the corresponding routes (pages) are generated by the framework directly in the browser, using data retrieved from the API. It's also a PWA (Progressive Web App), the main feature of which is that you can install it to your home screen on your phone and launch it from there like a regular app. It also includes a service worker which catches requests to the API and returns cached responses when the network is not available. The Architekturführer is supposed to be taken with you on a walk through the city, and will keep working even if you are completely offline.
Notable mentions from the tech stack:
Vue Vue Router for the SPA functionality VueX for state management and storage / caching of the data returned through the API Leaflet (with Mapbox tiles) for the interactive maps Webpack 4 for compilation of the app into a single distributable Babel for transpilation of ES6+ SASS & PostCSS with Autoprefixer as a convenience for SASS in SFCs Google Workbox to generate the service worker instead of writing lots of boilerplate code Bootstrap 4 is barely used here, but we still included it's reboot and grid system Backend
The ProcessWire backend is API-only, there are no server-side rendered templates, which means the only PHP template is the one used for the API. For this API, we used a single content type (template) with a couple of pre-defined endpoints (url segments); most importantly we built entdpoints to get a list of all objects (either including the full data, or only the data necessary to show teaser tiles), as well as individual objects and taxonomies. The API template which acts as a controller contains all the necessary switches and selectors to serve the correct response in <100 lines of code.
Since we wanted some flexibility regarding the format in which different fields were transmitted over the api, we wrote a function to extract arbitrary page fields from ProcessWire pages and return them as serializable standard objects. There's also a function that takes a Pageimage object, creates multiple variants in different sizes and returns an object containing their base path and an array of variants (identified by their basename and width). We use that one to generate responsive images in the frontend. Check out the code for both functions in this gist.
We used native ProcessWire data wherever possible, so as to not duplicate that work in the frontend app. For example:
Page names from the backend translate to URLs in the frontend in the form of route parameters for the Vue Router Page IDs from ProcessWire are included in the API responses, we use those to identify objects across the app, for example to store the user's favourites, and as render keys for object lists Taxonomies have their own API endpoints, and objects contain their taxonomies only as IDs (in the same way ProcessWire uses Page References) Finally, the raw JSON data is cached using the cache API and this handy trick by @LostKobrakai to store raw JSON strings over the cache API.
Inspired by this thread with a little nugget based on AOS by @benbyf to visually distinguish development systems from production ones, I wrote a small module that does the same and lets you adapt colors and text.
Link to the github repo:
Version 0.0.1 is still very alpha and only tested on PW 3.0.124.
This module lets you change the color for the top toolbar and add a small piece of text for development systems, so you are immediately you aren't working on production (and vice versa). The adaptions are made through pure CSS and applied if either the "Enable DEV mode" checkbox in the module's configuration is checked or the property $config->devMode is set to true in site/config.php.
Works with Default, Reno and Uikit admin themes (though probably needs a lot of testing with different versions still).
Since a screenshot says more than thousand words...
Production system (unchanged):
Dev system (Default admin theme):
Dev system (Reno admin theme):
Dev system (Uikit admin theme):
Feel free to leave any feedback here and report any problems either in this thread or the github issue tracker.
I had upgraded my Apache configuration to include PHP7.2 and PHP7.3 for a Laravel-based script on the same server. Somehow it/I messed up a previously fine Processwire site, in a very confusing way.
The site still looks fine, but editing template files has no effect whatsoever. It is stuck on some kind of cached version. I have already disabled PHP7's OPcache, cleared browser caches, etc, with no effect.
The pages now apparently come from PW's assets/cache/FileCompiler folder, even though I never enabled template caching for this site.
I have tried adding "namespace ProcessWire;" to the top of the homepage template file, but then I get this fatal error:
My functions.php file pulls data in from another Processwire installation on the same VPS with the following line:
$othersitedata = new ProcessWire('/home/myaccount/public_html/myothersite/site/', 'https://myothersite.com/'); That apparently still works fine; the site still displays data from the other installation, but via the "cached" template that I am now unable to change.
I don't know where to start with this mess. Does any of this sound familiar to anyone? Any pointers in the right direction would be much appreciated.
Adding "$config->templateCompile = false;" to config.php results in the same fatal error as above.
The basic Processwire workflow assumes that I (as an Editor) want to save new Pages in draft mode - and therefore new pages are always set to unpublished by default. To publish the page, it is necessary to actively press "Publish", otherwise the Page will not be visible.
The workflow is:
Add new Page Status is now "Unpublished: Not visible on site." Press Publish - the page is now visible on site I want to publish pages right away (without having to press Publish).
Where is that configured?
Uikit v3 admin theme (0.3.0)
ich hoffe Ihr könnte mir weiter helfen?
Ich habe Processwire bei meinen Webhosting Anbieter installiert ohne Probleme.
Nun wollte ich es bei meinen Local webserver (MAMP 4.1) installieren...
Leider zeigt er mir einen Datenbank fehler, dass er bestimmte Tabelle nicht finden kann!!!
Kann mir einer sagen, wodurch der Fehler verursacht wirt?
Habe es auch schon bei einen Kumpel und eine anderen Local Webserver Umgebung Installiert. Immer der Selbe Fehler.
I hope you could help me further?
I have Processwire installed at my webhosting provider without any problems.
Now I wanted to install it on my local webserver (MAMP 4.1) ...
Unfortunately he shows me a database error that he can not find certain table !!!
Can someone tell me what causes the error?
Have it already installed with a buddy and another Local Web server environment. Always the same mistake.