Jump to content
Sipho

Using build tools and package managers with processwire

Recommended Posts

What build tools do people use with processwire? Most build tools I have tried are either solely designed for single-page applications or don't support bundling npm packages.

So far, I have been downloading third-party libraries and including them in my html. While this works, it isn't great when you want to update to a newer version. It also involves committing often hundreds of files not associated with the project when using git. For this reason, I would like to use a package manager to handle all of the updating for me and keeping my git directory nice and clean. After doing some research, it seems that npm is by far the most popular package manager. I find this strange considering it was designed for ndoe.js which is server side software but I can look past that.

I have had some experience with webpack when I was learning how to use Vue.js for making single page applications. For that purpose, it worked pretty well but was also extremely confusing at first. Everywhere I go I see webpack being recommended as the number one build tool for front-end web applications. However, I have struggled to get it working with anything that isn't a single-page application. It seems to be designed to bundle everything into one or two js files. This doesn't really work in a setup like processwire. I would like to be able to import certain css and js into pages only as needed. For instance, if I only need a slideshow on one page, it doesn't make sense to include the code that does that on every page. That's not to say you won't have some global css and js. I additionally don't like how complicated it is to setup a webpack project and how webpack imports css inside js files.

I decided to try Brunch which boasts being simpler than other build tools, including webpack. I must say, I am fairly impressed with it so far with it's ease of use. But I once again ran into the problem of it being designed for single-page applications. For example, I wanted to use lightbox on a few pages. After installing it from npm, I couldn't figure out a good way to include it's css. Brunch has a setting that let's you include styles from npm packages but it includes them globally. This means every single processwire page would have css for displaying lightboxes even when I don't need them. This would work but seems to go against the whole idea of being modular. I am also trying to use uikit as an npm package to no avail. I found somebody else with similar issues but was never answered: 

I noticed that ryan opted to just include a static version of uikit in AdminThemeUikit. Is this the recommended way of doing things? Have I got it all wrong? Doesn't this introduce pains whenever uikit needs updating?

All I want is a better way to handle all my dependencies. I have been looking for the correct way to do this and it's beginning to drive me insane :frantics:

Share this post


Link to post
Share on other sites

Personally I'm not using package managers. Mainly because I tend to avoid third-party packages in my projects. I'm a bit scared of updating one and breaking stuff.

That said, I can show you my boilerplate: https://github.com/heldercervantes/PWBoilerplate

This isn't perfect, and I'll certainly tweak it as time goes by, but it's simple and I love simple. Basically it lets me do version control for my templates and leave the PW installation itself out of GIT. Should I need to build a custom module on a project, that's easy enough to change.

I'm also doing SCSS, and compile all my JS into a single file. The JS part works well for simpler projects, but i.e. in my own site, I have JS I want to load only on the homepage (3d thingy, a bit bulky if a user lands directly in a blog post where it's not needed), so I had to work around that.

If it's any use, I'll be glad.

Share this post


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

However, I have struggled to get it working with anything that isn't a single-page application. It seems to be designed to bundle everything into one or two js files. This doesn't really work in a setup like processwire. I would like to be able to import certain css and js into pages only as needed. For instance, if I only need a slideshow on one page, it doesn't make sense to include the code that does that on every page.

Webpack is actually the bundler, which does support code splitting the best out of the things I tried. It's also quite manageable by using the laravel-mix wrapper, which contrary to it's naming is not in any way usable only with laravel. It takes all the daily-business use-cases and makes them easy, while you still can plug things into the underlying webpack directly if needed.

I'm currenly working most of my time with the phoenix framework, which does include brunch as default frontend build tool. Some people try to get things to work with it, some switch to another bundler right away, but besides for really simple needs it's just not developed enough. The best issue I know of is, that it's including things in the order they're listed in the packgage.json in some places, but npm nowadays actually orders dependencies in alphabetical order in that file. So if order does matter you need to actively revert that behaviour of npm.

  • Like 1

Share this post


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

That said, I can show you my boilerplate: https://github.com/heldercervantes/PWBoilerplate

This actually looks really good. That was another issue I was having; how to use processwire with git. It's pretty to similar to my current setup. Thanks!

However I still want to use certain third party libraries just as you have jquery, modernizr and swiper without having to commit them to git. Committing to git works but I feels like this use case is exactly what package managers were invented for.

5 hours ago, LostKobrakai said:

Webpack is actually the bundler, which does support code splitting the best out of the things I tried. It's also quite manageable by using the laravel-mix wrapper, which contrary to it's naming is not in any way usable only with laravel. It takes all the daily-business use-cases and makes them easy, while you still can plug things into the underlying webpack directly if needed.

I guess I will give webpack another shot, possibly using this laravel-mix wrapper you speak of.

5 hours ago, LostKobrakai said:

but besides for really simple needs it's just not developed enough

I guess that's why I was having trouble with it.

Share this post


Link to post
Share on other sites

I gave Webpack another shot and I think i judged it too harshly. It actually works quite well, but it can take quite some time to set-up. For that reason I have created a boilerplate inspired by @heldercervantes's boilerplate: https://github.com/nextgensparx/pw-webpack-boilerplate

It's nothing fancy at the moment but I mainly made it for my own personal use.

Thanks for the advice!

 

  • Like 2

Share this post


Link to post
Share on other sites

Good to know it was of use to you. I'll check out your boilerplate as well starting a new project in the future. Maybe webpack would be a good next step for my workflow.

 

Share this post


Link to post
Share on other sites
On 23/12/2017 at 1:36 PM, Sipho said:

I gave Webpack another shot and I think i judged it too harshly. It actually works quite well, but it can take quite some time to set-up. For that reason I have created a boilerplate inspired by @heldercervantes's boilerplate: https://github.com/nextgensparx/pw-webpack-boilerplate

It's nothing fancy at the moment but I mainly made it for my own personal use.

Thanks for the advice!

 

It look good

Anyone has experimented with yeoman? 

Share this post


Link to post
Share on other sites

After using Webpack for some time, I have yet again found certain limitations when trying to do anything that isn't Javascript. For that reason, I have created another version but using Gulp and Webpack; https://github.com/nextgensparx/pw-gulp-boilerplate. I'm trying to get the best of both worlds.

Someone else might find it useful. Be warned, it's very basic and opinionated. I would advise looking through it and changing it to suit your workflow.

@abmcr I am yet to try yeoman. Somebody might have already made a generator that does exactly what I want. I should probably check it out.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Tyssen
      I'm working on a site that uses the front-end tooling set-up from https://github.com/nystudio107/craft It uses package.json for defining all the Gulp plugins and paths as described in https://nystudio107.com/blog/a-better-package-json-for-the-frontend
      I've been able to convert it for use with my Processwire project but I'm a bit confused about how the Critical CSS part works and how to map URLs to templates. I've also found https://processwire-recipes.com/recipes/inline-critical-css/ which uses Grunt but again, it's not clear to me how it handles all the templates.
      Has anyone got a similar set up working and would you be able to share your package.json or gulpfile?
    • By Peter Knight
      Hi guys
      I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints.
      You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints.
      The main column in the above URL is successfully centered in most browsers except IE11.
      On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally.
      Here's a simple CodeKit and JSFiddle of the issue
      https://codepen.io/edenstudios/pen/qvWpGo
      https://jsfiddle.net/EdenSt/auekfgqt/8/
      Thanks
      P
       
       
    • By snobjorn
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By AndZyk
      Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist.
      The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages.
      www.galerie-claeys.de
       
      Features:
      Exhibitions Page transitions  
      Exhibitions
      On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment.
       
      Page transitions
      The smooth fading page transitions are made with Barba.js.
       
      Modules used:
      Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts.
      The website was build with help of the framework UIkit.
      www.musik.stadtkirche-pforzheim.de
       
      Features:
      Events Download dates  
      Events

      The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact.
       
      Download dates

      It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date.
       
      Modules used:
      Email Obfuscation (EMO) Front-End Page Editor Import Pages from CSV Markup Sitemap XML ProCache Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
       
×
×
  • Create New...