Local development with Trellis

[kpoxo6op]

Roots TRIAL - all good
I managed to set up my local development environment on Windows WSL with Trellis, Bedrock, Sage and deploy roots-example-project.test locally. I can access local URL roots-example-project.test.

I also managed to deploy roots-example-project to a real droplet at Digital Ocean, it worked well too.

Changing Test Project
Now, I kind of want to see how do I change stuff in my theme and see the results in my browser. For example, I want all links to become pink. So, I modified two .CSS files at roots-example-project folder:
_global.scss

a {
color: pink !important;
}

main.scss to make sure

…
@import “layouts/posts”;
@import “layouts/tinymce”;
.widget a {
color: pink !important;
}

Now I want to “reload the page” and and see the change . What do I need to do?
So far I tried to delete cache folder, destroyed and recreated Vagrant machine - no success.
Vagrant outputs this notice but I am not sure what exactly I need to run:

Composer and WP-CLI commands need to be run on the virtual machine for any post-provision modifications.

Please help, I am very confused right now (ah, BrowserSync does not work for me, I’ll create another topic for that.)

[JordanC26]

Just a quick reply whilst I have a moment.
In your terminal, navigate to your theme folder: /site/web/app/themename/

If you want to have changes live reload (browsersync):
Run yarn run start

Or, if you want the changes to compile in to the main.css file:
Run yarn build

Be sure to configure the settings in /themename/resources/assets/config.json too:
publicPath, devUrl, proxyUrl.

[kpoxo6op]

Thanks, browsersync does not seem to display my changes (I’ll create a separate topic for it).

I’ll try yarn build and post my config.json later today. It should be exactly the same as preconfigured in the test project though.

[kpoxo6op]

config.json
here is my resources/assets/config.json. I think I never changed it.

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/sage",
  "devUrl": "https://roots-example-project.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

yarn run start
as I mentioned, browsersync does not work for me. http://localhost:3000/ never gets updates.

yarn run start

yarn build
yarn build compiles my CSS but I can’t see any changes at https://roots-example-project.test/

How do I fix this so I can’t make changes in my theme?

[alwaysblank]

Have you activated the Sage theme in WordPress?

[kpoxo6op]

I don’t remember I saw this step in guides. How do I activate my theme in local environment?

Do I need to login to local WordPress and activate my local sage theme?

[kpoxo6op]

Also, I applied this workaround when I installed the local stack:

Plugin installation failed, rolling back; Could not delete

hi, this post is for those who’re following this guide: Getting Started: Windows (WSL) | Roots Documentation In case you’re getting Composer error at TASK [wordpress-install : Install Dependencies with Composer] ****************** like this: Plugin installation failed, rolling back then try this workaround: replace this “composer/installers”: “^1.4”, with this “composer/installers”: “dev-master#v1.7.0”, at your /roots-example-project.com/site/composer.json run composer update tr…

Could it possible cause my issues?

[alwaysblank]

@kpoxo6op

Do I need to login to local WordPress and activate my local sage theme?

Yes, it’s just like any other WordPress theme.

@kpoxo6op

Could it possible cause my issues?

That’s very unlikely. The change you made would only affect Composer, which only handles the installation of PHP packages. Problems with BrowserSync or site access are going to be a problem with JavaScript or server/VM/host configuration.

[kpoxo6op]

Thanks, I’ll try activation on my windows WSL setup after work.

Will also try fresh install on a new Ubuntu OS just to see if I run into that many issues again.

[strarsis]

It could be a CORS issue:

Sage 9 + BrowserSync not loading any CSS at all on 'yarn run start'

@Simeon: Edit: According to author BrowserSync has to be configured with advanced key: new BrowserSyncPlugin({ target, open: config.open, proxyUrl: config.proxyUrl, watch: config.watch, delay: 500, advanced: { browserSync: { cors: true, }, }, }), Related issues:

[kpoxo6op]

I had tried to paste a few different options from this Discourse in my resources/assets/config.json but didn’t try the one you mentioned. Will try “advanced” as well this evening, thanks.

I still hope there should be a way to load my CSS into browser without BrowserSync.
This basic flow should just work:
Update .CSS file -> save the files -> compile .CSS -> refresh page -> browser picks up new files and displays pink links.

[alwaysblank]

@kpoxo6op

This basic flow should just work:
Update .CSS file → save the files → compile .CSS → refresh page → browser picks up new files and displays pink links.

Yes, this should work. If you’re running yarn build and not seeing updated CSS files, then I’d imagine one of the following is going on:

• You haven’t activated Sage, so you’re still seeing Twenty-Nineteen or whatever the current default is.
• You somehow haven’t shared files property to your VM (or something…?) and so it isn’t seeing file updates
• The build process is not actually compiling your CSS (check the files it generates in your editor to make sure your new selectors are there).
• The CSS files you’re updating are not enqueued (or something) and are just not being loaded at all because links to them are never generated.

[kpoxo6op]

thanks, we’ll check these as well after work

[kpoxo6op]

wow I am the biggest fool in the Universe, all I needed was theme activation in WP admin.

Browsersync and everything else is working for me in WSL.