Using Sage on Local

sage

#1

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?


#2

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

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.


#4

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