Ahmad Awais

NAVIGATE


SHARE


My Advanced Gulp Workflow for WordPress Themes

Ahmad AwaisAhmad Awais

If you are an absolute beginner when it comes to Gulp, you might want to read Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate. Moreover, this post is just an article, which hasn’t been updated in a long time. I maintain this workflow under WPGulp repository. I suggest you all to read this post to get an idea and use WPGulp instead.

If you are not using Gulp or any task runner, believe me when I say that you are missing out on all the front-end fun stuff. Today, I intend to share my advanced Gulp based automated workflow for building WordPress themes, with the community.

I remember the time when I had to minify CSS and JS files, compress the images and the fuss of testing my designs across different browsers let alone devices β€” oh my. If my recollection of lost isn’t misleading me then I used to spend like 30% of my productive hours on this stuff.

JUST A NOTE!
πŸ‘¨β€πŸ’» I’m teaching thousands of devs how to become VSCode Power Users β†’
βœ… This site is super fast?! It’s hosted with Kinsta on Google servers β†’

Thankfully, someone wrote a piece about DRY (Don’t Repeat Yourself) and it got me thinking about the flaws in my workflow. I believe a tweet from Chris Coyer led me to start using Grunt in 2012 or a little later. I used it for over a year and boy it was a fun ride.

Why Gulp?#

While Grunt took care of optimizing images, compressing scripts, and compiling Sass, I never really enjoyed writing Grunt files. Then in Dec 2013, I heard about this new task runner called Gulp. On a Sunday morning, I thought to create a dummy project and try Gulp, to say that I was hooked would be an understatement.

Why Do I Like Gulp?#

At that time, there was hardly any documentation available for using Gulp with WordPress, but thanks to the awesome helping community at Stack Exchange, I was able to make it work. I found Gulp to be a lot better than Grunt. Here is why:

That said, let’s leave the story for now and see what it is like to be using Gulp with WordPress.

Do I Need to Use Gulp?#

Are you a web developer? Do you program in HTML/CSS sometimes?

β€” Yes!

Did you ever use a task-runner? Feel like you belong to the stone age while all the crazy kids in town are using awesome advanced workflows?

β€” Yes! :(.

OK! let’s get you started then.

Since this article is about an advanced Gulp based workflow, explaining how to do basic Gulp related stuff is out of the scope. But instead of leaving you (beginners) in the middle of nowhere, I’d like to suggest a few articles to help you get started.

If having a basic Gulp workflow is nothing new for you, then maybe you’ll enjoy reading my advanced gulp workflow.

Advanced Gulp WordPress Workflow#

While building premium themes for WordPress, I end up with a lot of grunt work which includes

Let’s explore how I get all this stuff done with Gulp.

I have set up a Github repository called Advanced Gulp WordPress. You can check out the structure of files inside it for better understanding.

advanced_gulp_file_structure-red

A Look at gulpfile.js#

Now let’s take a look at gulpfile.js which is present in the root folder of our theme. I will explain each task one by one to make it easier for you to understand. You’ll find completed gulpfile.js at the end of this post.

Since I assume you already know how Gulp works, I will not be explaining how to put all the plugins/packages in package.json file and other basic setup related steps.

Step #1: Setting Up the Variables#

Firs of all I am going to set up certain variables so that I don’t have to change everything for every other theme I create. Let’s review the code

I’ve set up variables for

Step #2: Loading Gulp Plugins#

I am using quite a few gulp plugins to help manage everything we discussed above.

The plugins I am using to are as follows

Phew! That was a lot. Well, at the end of the day, it’s all worth the effort.

Step #3: Task to Setup Browser Sync#

Let’s dive a little deeper and create some awesome tasks to automate our workflow. Browsersync is one of my favorite plugins.

I used to have LiveReload in my workflow, which would reload the web page whenever a file gets edited and saved. But when Browsersync was introduced, it helped me cut down half of the shitty things I had to do in order to automate syncing between different browsers. Browsersync helps me with the following stuff;

Step #4: Gulp Style Task#

Let’s take a look at the styles task I built. In this task, there is a lot going on. We are compiling Sass, creating minified CSS and optimizing media queries.

Let me explain line by line, what’s going on in there

Step #5: Scripts Minification and Concatenation#

Now to deal with custom JavaScript files and 3rd Party JS files, I have created two tasks called vendorsJs and scriptsJs. They both are pretty much similar. Let’s review the code.

Here is what’s happening in there

Step #6: Image Optimization Task#

There nothing new in the image optimization task. Look at the code below.

Step #7: Building a Clean Installable Theme Zip File#

This is a group of tasks which are responsible for creating a clean copy of installable theme zip file. Take a quick look at the code. There is nothing much to it, it is all basic copy pasting and deleting or ignoring of files/folders.

This task will run only when I will use gulp build command. Let’s review what happens when this command is run

Step #8: Watch Task#

Finally, there is a watch task which helps in automatically running the styles, scripts, images and browser-sync related tasks in case of any change that occurs in the below-mentioned folder.

Final gulpfile.js#

What About You?#

Well, that’s about it. I’d love to see how you people use Gulp to automate front-end related grunt work. If you have any questions or any suggestions, let me know in the comment section below.

I’d also like to mention and thank Chris Coyer, Alex Vasquez, Matt Banks and all the Gulp contributors, who have helped me along the way with their GPL/MIT based code and contributions. Pull requests are welcomed.

Did you like what you read? Tweet About Advanced Gulp Workflow for WordPress.

JUST A NOTE!
πŸ‘¨β€πŸ’» I’m teaching thousands of devs how to become VSCode Power Users β†’
βœ… This site is super fast?! It’s hosted with Kinsta on Google servers β†’

I help businesses understand developers πŸ“Ÿ Just launched Node.js CLI Automation Course πŸ‘¨β€πŸ« Edutainer at VSCode.pro 🎩 An award-winning GitHub Star open-source engineer & advocate 🦊 Google Developers Expert Web DevRel 🌳 Node.js foundation Community Committee Outreach Lead ✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker πŸ™Œ Leading developers and publishing technical content for over a decade πŸ’œ Loves his wife (Maedah) ❯ Learn more β†’

Say πŸ‘‹ on Twitter @MrAhmadAwais | Subscribe to the Developers Takeaway!

πŸ“¨

Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam β€” pinky-promise!

πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» 118,947 Developers Already Subscribed
Comments 67
  • Harish
    Posted on

    Harish Harish

    Reply Author

    Hey Ahmad, thank you so much for sharing this. I just got into using Grunt few weeks back and decided to use Grunt as I saw in WP community most people were using Grunt. I have few questions and I’d appreciate your time.
    1. Do you use virtual server such as vagrant, etc. or something like XAMPP?
    2. Will the above setup (browser sync) work when we use XAMPP?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Harish! I get that, WP core is still using Grunt. Just like WordPress Repo still uses SVN but you do use Git don’t you? Don’t let the core decide if you need to use the latest and better task runner or not. I use Grunt for my core contribution workflow.

      1. Yes, first thing you should know that I am a Mac user, and everything I wrote above was tested in a Mac OS. I use both Vagrants and DesktopServer (which uses XAMP I think).
      2. Yes, of course. There should be no issue at all. Try it out and let us know.


  • Alex Vasquez
    Posted on

    Alex Vasquez Alex Vasquez

    Reply Author

    Hey Ahmad,
    This is a superb and detailed write-up; I see some good things here I can take and use myself. Well done! =)


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Alex!
      You are the source of all the inspiration here. I have mixed your workflow with what I used to have back in the day. I do plan to push an update with split files based Gulp architecture and a few cool plugins too, which I found while writing this article.


  • Ryan
    Posted on

    Ryan Ryan

    Reply Author

    Thank you for this post, very informative and takes a lot of the fear away ;)
    I have only used Grunt a tad, and was still on the fence about trying to look into Gulp, but I am excited to give this a try in my workflow.

    Thank you much!


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Ryan!
      I am sure you’ll enjoy working with Gulp. Thanks for stopping by.


  • Warre
    Posted on

    Warre Warre

    Reply Author

    I was aware of the “power” Gulp had, but didn’t have the courage to learn about it, just because I thought it was a rough road ahead. I develop WP sites on a daily bases, and learned so much from this article & your Git repo. Not only about Gulp. The structure of your WP base project is something that I’ll try and integrate in mine too. Big thank you for the extremely well explained tutorial!


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      It’s awesome to be helpful. About the structure, I intend to write a new post, since it is a bit unconventional. Keep up the good work.


  • Jorge Saco
    Posted on

    Jorge Saco Jorge Saco

    Reply Author

    I haven’t read the whole article but I already love you!
    This looks very detailed, awesome job.


  • Dantnan
    Posted on

    Dantnan Dantnan

    Reply Author

    Very good and detailed guide for gulp. Well done! :)


  • jatne
    Posted on

    jatne jatne

    Reply Author

    nice article! it’s time to start using this stuff :)


  • Josh
    Posted on

    Josh Josh

    Reply Author

    Whaatttt? Tunnelling a URL to show others???? This is the remote freelancer’s dream!!!!


  • Jason
    Posted on

    Jason Jason

    Reply Author

    Thanks for this, there’s a lot of good stuff here and I’m going to go through it thoroughly to get started with Gulp.

    One thing I noticed in your repo was that the ‘wp-content’ folder name is hard-coded. This can be changed in wp-config.php using the WP_CONTENT_DIR constant and may not always be ‘wp-content’.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Jason, thank you for stopping by. You are right about the hard coded links. Actually, since I posted this article I have updated my workflow a lot. I’ll write about it. But here are the humble open source beginnings of how to keep the configuration and modules separate, a WordPress Gulp Boilerplate.


  • Jxn
    Posted on

    Jxn Jxn

    Reply Author

    I have been reading tutorials on Gulp and Grunt for a couple weeks now. This is the best and most detailed by far! Nice job!


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Thanks, Jxn! I am going to write more of such these, my workflow has updated a lot since I wrote this.


  • Litzy
    Posted on

    Litzy Litzy

    Reply Author

    This was so easy to follow. Even as someone just getting into workflow automation. Thanks for taking the time to break everything down and sharing your process!


  • Hans Koch
    Posted on

    Hans Koch Hans Koch

    Reply Author

    You have my thanks! I didnt know much on how to work with gulp but with your article and some research on my own i was able to kickstart my knowledge big times.


  • tryles
    Posted on

    tryles tryles

    Reply Author

    This is nice. Got it running on a WP install inside a Vagrant box.
    Replaced gulp-combine-media-queries with gulp-group-css-media-queries because the former threw an error.


  • Charles
    Posted on

    Charles Charles

    Reply Author

    Hey guy, amazing article. I love to work with Gulp and Sass.

    I’ve got a question: Where did you create this “mindmap” file structure (file structure graph)?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      I forgot the name of that tool. Let me think over it.


      • Charles
        Posted on

        Charles Charles

        Reply Author

        Did you already remember it?


        • Ahmad Awais
          Posted on

          Ahmad Awais Ahmad Awais

          Reply Author

          Nops! Unable to find it.


          • Charles
            Posted on

            Charles Charles

            Author

            Okay. Did you use an online tool or something like Microsoft Visio?


          • Ahmad Awais
            Posted on

            Ahmad Awais Ahmad Awais

            Author

            I am pretty sure it was a terminal tool, probably a ruby GEM.


  • Tim
    Posted on

    Tim Tim

    Reply Author

    This is a nice approach to working with Gulp. I think that being able to use Browsersync alone makes it worth learning Gulp. I’ve been using a simpler Gulp workflow for a few months and was hoping to learn how to manage dependencies with Bower. But here are a couple of things I use to speed my workflow along and hope that it will help others as well.

    I develop locally and use AMPPS (free) to help make my life easier. First, you can create domain names for your local installs instead of using localhost. Also, AMPPS comes with Softaculous that allows you to install WordPress very quickly using the auto-installer.

    I found that it isn’t necessary to run β€˜npm install’ every time I want to use my workflow for a new theme. I simply copy the node_modules directory from another theme – change the Browsersync setting and run gulp. The problem with this is that my node_modules directory is about 1.3 Gb and that began filling up my hard drive very quickly. So, I moved the node_modules directory to the root folder (in AMPPS) and made an alias of it and placed the alias in my theme folder and it works seamlessly for each theme.

    Thanks for the fantastic article.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Glad you found it useful. 1.3GB of node_modules is a pretty strange thing. I have never seen them taking more than 150MB space. You might wanna check if you have had been clearing the cache or not.


  • yvesmatthess
    Posted on

    yvesmatthess yvesmatthess

    Reply Author

    Very good article Ahmad. Thanks for tis effort. This browser-synch configuration doesn’t work on my XAMPP. My wordpress testsuite runs under: localhost/wordpress2.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Thanks. Did you configure the project URL with localhost/wordpress2?


  • Amir Hameed
    Posted on

    Amir Hameed Amir Hameed

    Reply Author

    Now this is something. good work. :)


  • Rene Hermenau
    Posted on

    Rene Hermenau Rene Hermenau

    Reply Author

    Epic work! Thanks for sharing, Ahmad


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Glad I could help. An update is due!


  • Ricardo Correia
    Posted on

    Ricardo Correia Ricardo Correia

    Reply Author

    Hi Ahmad,
    What do you use to create page templates and get data from the DB?
    I use TIMBER fo get all .twig templates running. Do you recomend it with this workflow, or do you have any other alternative?

    Thanks. Great work!


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      I have used Timber with this workflow, works pretty great. Guess we are in the same boat for our love of Twig templating engine.


  • Rutz
    Posted on

    Rutz Rutz

    Reply Author

    I read you’ve changed this workflow and I like to know what do you consider the most important thing you’ve changed?


    • Rutz
      Posted on

      Rutz Rutz

      Reply Author

      by the way, nice work :)


  • Phouvanh
    Posted on

    Phouvanh Phouvanh

    Reply Author

    When i try to run “gulp” i receiving the following error, could you please give me a hint what wrong.

    [09:52:15] Using gulpfile /Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/gulpfile.js
    [09:52:15] Starting ‘styles’…
    [09:52:15] Finished ‘styles’ after 17 ms
    [09:52:15] Starting ‘vendorsJs’…
    [09:52:15] Starting ‘scriptsJs’…
    [09:52:15] Starting ‘images’…
    [09:52:15] Starting ‘browser-sync’…
    [09:52:15] Finished ‘browser-sync’ after 42 ms
    [09:52:15] gulp-imagemin: Minified 0 images (saved 0 B – 0%)
    [09:52:15] Finished ‘images’ after 125 ms
    [09:52:15] gulp-notify: [Gulp notification] Custom scripts task complete
    [09:52:15] Finished ‘scriptsJs’ after 386 ms
    buffer.js:167
    throw new TypeError(‘must start with number, buffer, array or string’);
    ^

    TypeError: must start with number, buffer, array or string
    at fromObject (buffer.js:167:9)
    at new Buffer (buffer.js:58:10)
    at Transform.transform [as _transform] (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/gulp-combine-media-queries/index.js:145:21)
    at Transform._read (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at Transform._write (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    at writeOrBuffer (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_writable.js:227:5)
    at Transform.Writable.write (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_writable.js:194:11)
    at write (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:67:13)
    at DestroyableTransform.emit (events.js:166:7)
    at emitReadable_ (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
    at emitReadable (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
    at readableAddChunk (/Volumes/Document HD/Developments/MAMP-htdocs/sandbox/yopress/wp-content/themes/Advanced-Gulp-WordPress/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)


  • RB
    Posted on

    RB RB

    Reply Author

    Nice post!
    But what about versioning of css and js files, have you tried getting that into your workflow? How or why not?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Thanks! Yes, I use Git for keeping up with the versioning of CSS and JS files. Don’t you?


  • Justin O’Neill
    Posted on

    Justin O’Neill Justin O’Neill

    Reply Author

    Great write up!

    Unrelated Question:
    What did you use to create the folder/file structure image ? It’s fantastic!


    • AhmadAwais
      Posted on

      AhmadAwais AhmadAwais

      Reply Author

      Thanks!

      Completely forgot what I used to do that. Will come around remembering it, some day!


  • Leslie
    Posted on

    Leslie Leslie

    Reply Author

    So now, what is the best way to import Bootstrap to this workflow?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      You just add CSS and JS files you need in their respective folders. Not sure, I understand what’s the problem here.


  • Mark
    Posted on

    Mark Mark

    Reply Author

    Newbie here. What is the theme based on? Bootstrap? Foundation? Your own? Thanks.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      There’s no theme here. This is just a boilerplate. Also, I recommend you use to try WPGulp β€” which is the maintained portable version of this workflow. If ask me personally, I hate frameworks and always build my own depending upon the projects.


  • Sajed Shaikh
    Posted on

    Sajed Shaikh Sajed Shaikh

    Reply Author

    Hey Ahmad, Thank you very much for writing this article. I’ve configured my WP themes with Gulp. Kudos to you!


    • AhmadAwais
      Posted on

      AhmadAwais AhmadAwais

      Reply Author

      Glad to know that! Keep up the good work!


  • Jeff
    Posted on

    Jeff Jeff

    Reply Author

    Hi Ahmad,

    With WPGulp it is possible to download package.json and that’s fantastic!

    Do you have the package.json file for this boilerplate? In that way I won’t need to install each module one by one. Thank you!


  • Dave
    Posted on

    Dave Dave

    Reply Author

    Hey Ahmad,

    great tutorial, thank you! What I don’t understand is, why you are separating the vendors and the custom JS files. What’s the purpose of that?

    Best regards,
    Dave


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Dave!
      Vendor files should always be enqueued before the custom JS files. That’s why!

      Obvioulsy, custom JS files can have a dependancy and that kind of order can’t be handled if you don’t have a vendor file enqueued before the customJS files.


  • Casey
    Posted on

    Casey Casey

    Reply Author

    Hey Ahmad, thanks for the awesome build tool! Its working great except I can not get the comment to work for the child theme. I’ve added the ‘ /*! Theme Name: Child Theme …’ and it compiles to 1 line in my style.css any thoughts on what to do next?


  • Mark Abucayon
    Posted on

    Mark Abucayon Mark Abucayon

    Reply Author

    Hi Ahmad,

    Thanks for this info. I am wondering why does the link changed from http://localhost:3000/mysite to //localhost:3000/mysite the http: is being removed. Any suggestion on this?

    Thanks


  • rakesh kumar
    Posted on

    rakesh kumar rakesh kumar

    Reply Author

    Hi Ahmad, I have been following you from a long time and able to create my own gulp workflow for html based websites. Right now trying to implement gulp wworkflow for WordPress but little bit different with your version of gulp workflow but definitely it will help me to generate my own gulp workflow. In your version of gulp workflow you have used some plugin that right now I am not able to fully understand and bower as per their website had been deprecated. How we can combine different css in a single file before loading into WordPress theme(s) the same i want for all Js files. What should be our template file structure, if you could guide us in detail that would be a great help


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Bower is old news. I’d recommend you to leave that alone and try WPGulp.


  • Fredrik Pettersson
    Posted on

    Fredrik Pettersson Fredrik Pettersson

    Reply Author

    Thank you Ahmad for sharing your setup!
    Been using grunt but want to switch to gulp instead and love your setup.
    Got everything up and running but sourcemaps doesn’t seem to work.
    Only getting reference to style.min.css not the partials.
    Tried both on my own setup based on WPGulp and with your bolierplate. Any idea why?


    • Fredrik Pettersson
      Posted on

      Fredrik Pettersson Fredrik Pettersson

      Reply Author

      Update! If I change in functions.php to use style.css instead sourcemaps seems to working just fine pointing to the correct *.scss.
      Is this a requirement to get sourcemaps working or am I missing something?
      Thank you in advance!


  • Mark
    Posted on

    Mark Mark

    Reply Author

    I would love to see a tutorial for gulp 4.


  • Philip
    Posted on

    Philip Philip

    Reply Author

    I am using local by flywheel with the wpgulp setup, everything is working fine except when i click on ‘view site’ in the local flywheel app my url is ‘http://starline.local’ which is correct. However the gulp url goes to “http://localhost:3000” and this works fine with the wpgulp. However i want the wpgulp to load the url ‘http://starline.local’ that local provides.

    how do i set the url to be that instead of localhost. browsersyn only updates the localhost:3000 url and not the starline.local url.