I’m downloading the package and seeing if the updates work. I think current sage 9 uses an older form of Webpack? Is this correct? And your branch uses Webpack 5?
Correct, the update branch uses webpack 5 and the latest dependencies.
As you want to inline a binary image, the webpack loader needs to be configured/used to do so:
Whatever you did in your updated branch was brilliant. It fixed my issues, importing modules from node_modules worked as I expected. I’m still learning Webpack so it helped me a lot. Are you one of the maintainers?
The experience I had in the last few hours working with your updated branch vs Sage’s current solution was the difference between night and day. Your branch solidifies my belief that this theme is what WordPress theme designers need and it should be the main method of shipping themes to clients, not via page builder plugins with its rendering glitches and poor support at premium price.
I want to pick up a framework like Sage and start hacking away at my theme for my client, not doubling down and losing time on hacking Sage to work + plus struggling to finish the client project and inching closer to the project deadline.
Anyway. I hope Roots/Sage keeps doing what they are doing, I know it’s not easy, but it is appreciated. Is there a sponsorship program to donate to the project on a monthly basis?
No, I am a contributor, but not a maintainer.
You may also want to try out Sage 10 which is in
Sage belongs to Roots which also has the Roots Foundation.
You can also donate to them on Patreon: https://www.patreon.com/rootsdev
Do you know if they have those webpack issues fixed as well? It seemed like sage 10 was not production ready according to some of the issues.
It should also be fixed with Sage 10 as it uses newer dependencies, including Webpack 10. It is a bit different as it uses Laravel Mix for simplifying the webpack configuration.
Did you say Webpack 10?
I tried installing dev-master and Laravel Mix is new to me. It says to update it with my local url but it is not clear to me how to do that nor does it give an example.
If I understand you correctly you mean that you need to change the BrowserSync configuration.
For Sage 10 it is located in the
sage.testwith the URL the locally developed site is reachable, e.g.
By its default configuration BrowserSync will use
localhostand a random, available unprivileged (above 1000) port for proxying and open the default browser pointed to it.
Yes this is what I needed, thank you. I really love what is happening with the dev-master branch for Sage. This is the kind of workflow WordPress needed from the beginning.
I’m at the point where I am now done with the project and I’m trying to deploy the theme to a VPS server…I’m trying to do a simple git deploy…I get the files in the correct directory on the server…
I’m issue is the commands to run next…I run ‘composer install’ and it seems to do fine…the docs says something about copying over the ‘/dist’ file that sage dev-master uses public, so I assume the docs are not updated…but when I activate the theme I get the white screen of wp death…yarn “build:production” also doesn’t seem to work which I don’t understand…I have all the packages installed.
- So you are not using roots.io Trellis (it could be very useful for managing a WordPress VPS, but you need a fresh one).
- The theme build process (
npm run build/
npm run build:production) should run on your workstation/build/CI server, it isn’t a good idea to build on the production system. The production system should be as simple as possible. After building the theme, one would zip/rsync the built theme files and send them to your production system.
composer installis necessary to install the theme runtime/dependencies. This can be run on the production system.
NPM not Yarn?
Ok the process:
- npm run build
- npm run build:production
- .zip the project folder (what do I do about the node_modules folder? I tried uploading the theme zip and Wordpress said it was too big.
- do I run composer install before or after activating the theme?
- is there anything else I’m missing?
node_modules folder is only used for building the assets using nodejs-based tools (like webpack),
it shouldn’t bei included in the theme!
composer install before activating the theme. But as I see in your latest post, you are zipping the theme - so you can also invoke
composer install before zipping and adding the
vendor/ folder to the theme ZIP.
Does this theme ZIP build script help you (pick the one for the right Sage version (9 / 10))?
Thank you. I ran the script, although I’m not sure why it still says the zip file is too big. It’s a fresh digital ocean droplet…maybe I need to adjust some server settings?
I raised the file upload limits following this tutorial (https://websiteforstudents.com/fixing-413-request-entity-too-large-with-wordpress-nginx/) and still no go. I know the zip file it generated is only 8.2mb…so maybe it’s my server set up
ok I made some progress. I updated the nginx correctly this time and it started to upload buuuut WordPress tried uploading the theme to the uploads folder…which is new to me. Any ideas?
Looks like an owernship/permissions issue with the uploads/ folder. The PHP(-FPM) process needs sufficient rights to copy files from the PHP upload directory into the uploads directory.
This should be fixed on that site/VHost setup as it prevents any uploads with WordPress.
This is helpful, especially for VHosters that use control panels like CPanel:
Oh - and you can use a FTP client (when you got FTP connection) or maybe even a WordPress plugin or PHP based file manager (as a last resort) to set the permissions for the uploads directory.