# Suggestions to workflow with PUG / Webstorm? **URL:** \ **Category:** General\ **Created:** [October 10, 2019, 12:53pm UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424 "2019-10-10T12:53:24Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![cifra](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cifra/32/2179_2.png) [@cifra](https://forum.pinegrow.com/u/cifra)\ **Post date:** [October 10, 2019, 12:53pm UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424/1 "2019-10-10T12:53:24Z")
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. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [October 10, 2019, 2:55pm UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424/2 "2019-10-10T14:55:41Z")
Hi there @cifra , Pinegrow does actually work with PUG, if you check here, [http://docsbeta.pinegrow.com/quick-introduction-to-pinegrow/?highlight=pug](http://docsbeta.pinegrow.com/quick-introduction-to-pinegrow/?highlight=pug) (there is NO information in the current docs for PUG so - ALWAYS check [docs.beta](http://docsbeta.pinegrow.com) 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, Ie, VSCode, Atom 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 🙂 [https://pinegrow.com/pg4assets/movies/css.sass\_1920.mp4](https://pinegrow.com/pg4assets/movies/css.sass_1920.mp4) this is a link to the video on the landing page of [https://pinegrow.com](https://pinegrow.com) 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 . > [@cifra](#): > > Pinegrow doesn’t understand MVC pattern or Pug layouts. It just shows as plain text and nothing runs. ---
**Author:** ![cifra](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cifra/32/2179_2.png) [@cifra](https://forum.pinegrow.com/u/cifra)\ **Post date:** [October 10, 2019, 4:59pm UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424/3 "2019-10-10T16:59:57Z")
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 html head meta(charset="utf-8") 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="https://fonts.googleapis.com/css?family=Kalam&display=swap" rel="stylesheet") body 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. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [October 11, 2019, 11:02am UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424/4 "2019-10-11T11:02:38Z")
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 🙂 Still, if you do find a nice workflow, could you post it, maybe link it over on this topic too? > [@What is your work flow to go from design mockup to full website?](https://forum.pinegrow.com/t/what-is-your-work-flow-to-go-from-design-mockup-to-full-website/359/23): > > No worries. I think it would be great if we could share code with each other and learn from real examples. Is there a section of the forums where we can do that? When I get more into Pinegrow and buy it here soon I am sure I will have questions in which case I will share code samples. I am in the 7 day trial now as I installed it earlier or last night I think. I am going to be watching the video tutorials again to learn more on it and experiment directly in it. One question I have is can … And/Or maybe you could also formulate what you need and post it on the #Feature Request channel? ---
**Author:** ![cifra](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cifra/32/2179_2.png) [@cifra](https://forum.pinegrow.com/u/cifra)\ **Post date:** [October 26, 2019, 5:13am UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424/5 "2019-10-26T05:13:24Z")
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. ---
**Author:** ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)\ **Post date:** [December 11, 2019, 10:22am UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424/6 "2019-12-11T10:22:15Z")
> [@cifra](#): > > However, PG is way too focused on the frontend That is what Pinegrow is for. Designing the front end of websites or web apps. It is not meant for any backend work even though it can connect to local webservers and has one built-in, you would never use PG for backend work. If you need a backend design application you would need to look else where. Pinegrow is only for designing the user interface. ---
**Author:** ![cifra](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cifra/32/2179_2.png) [@cifra](https://forum.pinegrow.com/u/cifra)\ **Post date:** [December 20, 2019, 1:03am UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424/8 "2019-12-20T01:03:52Z")
> [@Terry44](#): > > That is what Pinegrow is for. Sure, I never said it wasn’t. But Pug is not just merely a frontend language. Quoting them: > Pug is a high-performance template engine implemented with JavaScript for Node.js and browsers One of the most significant advantages of using Pug is its templating. Other benefits would indeed need a backend, something out of PG’s scope, which is perfectly fine. But templating is not out of PG’s scope. It’s 100% frontend, and it’s not supported. Saying PG supports Pug when it only transpiles code, it’s really not supporting Pug. When I bought PG and discovered what they meant by supporting Pug, it was disappointing. Can we get the biggest Pug frontend advantage, templating, working in PG? ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 20, 2019, 10:47am UTC](https://forum.pinegrow.com/t/suggestions-to-workflow-with-pug-webstorm/3424/9 "2019-12-20T10:47:21Z")
> However, PG is way too focused on the frontend I fully agree with what you are saying! Front-End Back-End? Even Dreamweaver was already capable of working with full blown PHP/ASP, show PHP includes and PHP pages, create secure login systems and forms 8 years ago. And not without a good reason! Most webdesigners do both now a days and it would be stupid to limit a application like Pinegrow to only Front-End. Pinegrow already shows PHP pages (except for PHP includes) in browser view. I created a PHP form system for 4 languages without a problem in Pinegrow with the help of Sublime Text 3. For the people that don’t want to work Back-End no problem don’t do it. I think that when you want to work in Pinegrow with WordPress and don’t work Back-End you will have a difficult time doing it: Is WordPress Front-End or Back-End technology? : **Actually it’s a system that supports both Front-End & Back-End development**. Imagine a client has a WordPress site that was made by you with PHP errors and you don’t know how to fix them, because you only know the Front-End! So the border between Back-End and Front-End becomes more vague as soon as you create a website from the beginning till the end like most small businesses in webdesign do.