Recently Browsing 0 members
No registered users viewing this page.
By Guy Incognito
Have read loads of similar threads but can't find the deifnitive answer. I'm bootstrapping ProcessWire into a Magento installation. Everything is working fine in terms of expected PW API functionality, however I cannot get the paths for images in the site work correctly.
ProcessWire is installed in a subfolder called 'pw'.
If I load the PW site directly e.g. visit mainsite.com/pw everything loads fine and all image paths are correct. If I load the parent site in the root folder with the PW bootstrapped page content rendered within it, the image paths don't contain the subfolder and so are broken. So I get
https://mainsiteexample.com/site/templates/img/test.jpg instead of
https://mainsiteexample.com/pw/site/templates/img/test.jpg I've tried updating the rewrite base in the .htaccess file but it doesn't seem to make any difference. Have also tried various settings in the config file to no avail. Wondering if rewrite base perhaps isn't working as intended because I'm behind a NGINX/Apache hybrid environment?
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.
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
By Noel Boss
ProcessWire & Vue.js — a Lovestory
Introducing the all new ICF Conference Website
The new ICF Conference Page — Fearless
» What would happen if we were equipped to fearlessly face the daily challenges and live a life without fear? «
This question is at the core of our next ICF Conference in 2019 in Zurich. Its also the question we set out to answer in terms of developing the new website; the all new ICF Conference website is our most advanced website in terms of technology, designed to take advantage of the latest web-technologies.
Its a brand new design powered by a lean setup, using ProcessWire for easy content management and a slick frontend based on Vue.js, Quasar and a heavily customized Uikit theme.
Technology-stack — From backend to frontend, technologies that are fun, easy and fast to develop with We built on the ICF Ladieslounge website as a solid foundation and took our learnings from building our last Conference Booklet PWA (Progressive Web App) and applied it to the new website.
Some highlights of the new ICF Conference website:
Completely decoupled backend and frontend Custom design based on Uikit frontend framework Changing of languages happens instantly, no page-reload required Easy content updates thanks to ProcessWire All data is transferred using a single request returning custom JSON
» Continue reading on Medium
And please don't forget to clap and share: