Pinegrow Community Support Forum

Suggestions to workflow with PUG / Webstorm?

I have a Node+Express+Pug website in the works, almost finished. But there are some responsive errors in some pages, something I’d love to use Pinegrow to fix.

Is there a way I can “connect” pinegrow to the scss (Express compiles scss on the fly, but I could just use css, I don’t care about that) and the Pug file so that I can see the site in pinegrow and fix responsive errors in the actual scss/css and pug files of the project?

I can’t just load the folder in Pinegrow and do it all from there because Pinegrow doesn’t understand MVC pattern or Pug layouts. It just shows as plain text and nothing runs.

Hi there @cifra , Pinegrow does actually work with PUG,
if you check here,

(there is NO information in the current docs for PUG so - ALWAYS check docs.beta
For documentation goodies with regards getting things done, as quite a few topics didnt make it into the docs Upgrade.

Check down to the Element code section of that page,
and see the tall, skinny P symbol to the right of the Search box -this de/activates PUG mode in code view.
…Also, you could just connect Pinegrow, to one of the two code editors there are Pinegrow Plugins available for, and use THEM as the main code editor, alongside Pinegrow’s visual tools,
and use those editors own PUG/ SCSS/SASS plugins and their own tools, and their super powers

And. pinegrow works with, and compiles SASS / LESS too!
Or, just use Pinegrow’s built in SASS editor/compiler :slight_smile:

this is a link to the video on the landing page of
just search that main page for SASS, you will get 11 hits.

SO, unless I totally missed the point of the question, is this info of any use?

ie .

Hi there,

Thanks for trying to help. But indeed, I’m afraid you missed the point. I’m well aware of Pinegrow’s ability to “speak” Pug. But AFAIK, that’s well all Pug ends.

Please note that simple Pug syntax and a Pug layout is not the same thing. As an example, this is my main Pug layout file:

doctype html
    meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
    include favicon
    title= title
    link(rel='stylesheet', href='scss/style.css')
    link(href="" rel="stylesheet")
    include header

    include flash

    // Content block START =====================================
    block content
    // Content block END =====================================

    include newsletter
    include footer

    script(src="/js/jquery.min.js" type="text/javascript")
    script(src="/js/bootstrap.bundle.min.js" type="text/javascript")
    script(src="/js/app.js" type="text/javascript")

It’s the correct way to use pug if you are working on more than one page. As you imagine, it wouldn’t make sense to repeat the same header over and over again. That’s why pug layouts exist.

Pinegrow’s webserver is very rudimentary. At least the one without the WP thingy. Thus, it misses most of the action of modern web development.

I will try to extract the HTML rendered by ExpressJS from the Pug layout scheme and paste it in pinegrow, see if with that I can get more done. But it’s a very ugly workflow.

Ok, cheers for that clarification, I shall wander off and have a look at Pug Layouts - oops, I wasn’t aware of that in the workflow but I had a feeling you were alluding to something that…eluded me!
I had a quick check to see if you’d posted much before to get the gist of your angle, and couldn’t find anything so hoped you might just be an educated newbie that was doing things special but hadn’t seen all the missing PG Docs in the old format.

Alas… I fell on my own, optimistic sword… curses :slight_smile:

Still, if you do find a nice workflow, could you post it, maybe link it over on this topic too?

And/Or maybe you could also formulate what you need and post it on the

#feature-request channel?

Apologies for my late reply.

Sure, I’ll drop a message on the #feature-request channel. I don’t think it’d be hard to implement, Pug (used to go by Jade) is very prominent in the Node/Express community and there are lots of transpilers and packages/modules.

However, PG is way too focused on the frontend so it should be able to attach to a Node server (like `node --inspect index.js) like Chrome (and others) connect to it. I don’t know what would be the best way to implement a deeper Pug understanding, but it’d be awesome.