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.
(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,
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
this is a link to the video on the landing page of 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?
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.
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?
And/Or maybe you could also formulate what you need and post it on the
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.
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.
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?
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.
