Using Sage on Local

Hi I’m having a lot of problems using Roots-Sage with Local.

How can you work on a WP theme made using Roots-Sage on Local?

I’ve been trying to do it but I get “Page not found” errors whenever I try to go to the site or to the admin panel. What should I do to work on a WP theme made with Sage?

Hey @PaulVargas

I’ve used Sage many times in Local, and I’m happy to try and help you figure this out! The process of using Sage with Local shouldn’t be too different from working with other local development environments.

Since Sage introduces a build process as well as BrowserSync, it’s a little more effort to ensure that the various config options are set correctly.

My guess is that there is some config issue regarding URLs. Couple of things:

  • Ensure that the site is running in Local.
  • Ensure the task runner is running? Ie, in a terminal, run npm start to make sure assets are compiled and BrowserSync is running (if you’re using BrowserSync).
  • Are you starting from a blank slate and using the composer installer, or do you have an existing Sage theme that you are trying to get to work with Local?
  • What are the urls that are being used? For example, what url is set in Local, and what are the devUrl and proxyUrl values set in the Sage theme’s resources/assets/config.json
  • What Url is being put into the browser? Are you using the devUrl or the proxyUrl?

Take a look at those things, and let me know if you have more questions, or need more help. If you do run into more issues, can you take a screenshot of the browser as well as the site in Local? That may help to get a better idea of what is going on.

– Ben

3 Likes

Thank you very much @ben.turner

I’m using an existing Sage theme that I’m trying to get to work with Local. I have a zip folder with WordPress and the Sage theme that I need to work on.

  • Ensure the task runner is running? Ie, in a terminal, run npm start to make sure assets are compiled and BrowserSync is running (if you’re using BrowserSync).

Done
I run:
yarn
yarn build
yarn start
Browsersync connected and opened localhost (proxyURL in the config.json) showing the site, but without styling.

  • Are you starting from a blank slate and using the composer installer, or do you have an existing Sage theme that you are trying to get to work with Local?

I’m using an existing Sage theme that I’m trying to get to work with Local.

  • What are the urls that are being used? For example, what url is set in Local, and what are the devUrl and proxyUrl values set in the Sage theme’s resources/assets/config.json

Changed the URLs in config.json:
devURL is the same that is in Local: http://nameofthesite.local (sorry I can’t show my client’s web name)
proxyURL: http://localhost:3000

  • What Url is being put into the browser? Are you using the devUrl or the proxyUrl ?
    When I use Local to open the site it uses the devURL (http://nameofthesite.local). When I use Browsersync to open the site it uses the proxyURL (http://localhost:3000)

When I open the site with Local it (now) shows the site, but without styling, the same as with Browsersync. And if a try to open the ADMIN site with Local it shows a “Page not found” message.

Thank you again Ben for all your help. I feel I’m closer to get it working.

1 Like

Since the styling isn’t showing, that usually points to one of two things:

  1. The assets haven’t been compiled
  2. The link to the assets is incorrect

When you open the browser’s debugging tools, I imagine that there are errors about missing assets.

  • Do the urls that those assets are pointing to exist (ie, can you see them using a file explorer on the host machine)?
  • Do the urls make sense – ie are they correctly formed?
  • Pay attention to the protocol (http|https)-- if the site is using HTTPS then it might be that browsersync is using HTTP and the certificate isn’t for localhost:3000. Browsersync and HTTPS has been finiky for me in the past. Sometimes if I’m not needing to debug HTTPS things, I’ll update the local site to regular HTTP just so that it removes one more item of complexity.
  • Is the correct asset being enqueued by WordPress? I think that is defined in app/setup.php

As for the admin things, again, if you don’t need browsersync on the admin, I’ll just us the regular url from Local to update content, and use the browsersync url for front end styling things.

Let me know what you find while looking at the browser console.

– Ben

2 Likes

Hey Ben,

I’m running into a few of the same issues as OP. Are there any good tutorials or resources on using Sage with Local? If not, you should have an intern whip up a quick tutorial :smiley: I feel like Sage is popular enough to merit one.

1 Like

Hello,

I’m getting the same problem. Can’t run Local with Sage… @ben.turner Any tips or tutorials how to get it working?

I don’t have anything recent, mostly because I haven’t done any projects recently with Sage. If you come across anything it would be great to include a link here!

In terms of getting things working, do you have the exact error message or screenshot of what you’re experiencing?

Managed to get it working by disabling Chrome’s default redirect of localhost to https, answer was on stackoverflow.

Then I just had to update the path for “standard Wordpess” composition and it worked.

I am using Sage 10 with Bud using local the flywheel and running into the same issue now. I have the same setup running on a Mac without any problems. But on my Windows 11, I have WSL2 enabled and use the Sage theme. Configuring it seems to be a pain. Below are the details of my setup:

OS: Windows 11 - WSL2
LocalbyFlywheel Version: 6.4.2+6012
Site Host: Screenshot attached (1st)
Bud Configuration: Screenshot attached (2nd)

Comments: I personally think, bud isn’t able to watch my changes. Because if I run yarn build, it compiles all the assets and adds to the CSS, but if I run yarn dev to continue to watch changes, it doesn’t watch for changes. I’ve attached the yarn dev output as the last screenshot.

image

image