Hi, I have built an entire website in pinegrow that has been converted to to nodejs site.
When developing the root folder was the public folder but for the site to work properly on a node server the directory structure has to have the html files in a ‘views’ folder which is on the root directory (outside the public folder).
When I load the project in pinegrow the pages are all jumbled up, probably because the route to the css is not valid. Is there a way of telling pinegrow where everything in my project is? Do I edit the pinegrow.json file or is there something in preferences? Do I edit the html files to tell it where the style.css is?
If anyone has had similar issues it would be great to know.
Ah ok, thanks. I’ll try that. I need to ask my developer if adding those paths will affect the routing in nodejs. Something that is a little out of my depth!
Yeah, i don’t know anything about nodejs, so it’s good idea to check…but the resources in the head section for css files will not find them if it uses relative addressing "../style.css" and then you move the page.
i assume the index page looks ok? or did it get moved relative to where the css files are located as well?
@excede - You actually can “fix” your routing fairly easily. I’m assuming that your CSS is inside the “public” folder. Within the ‘Project’ panel, if you right-click on one of the views files you will get a context menu. Within that context menu, there is an item, “Fix links” at the bottom of the top section.
Notice, however, that I put “fix” in quotes. That is because I think that will end up breaking your Node app. I’m not sure how you are bringing your CSS into your view files. Are you doing it through a single shared header? If so, all of the CSS files should be relative to that header. Are you using something like Express? that allows the declaration of a static folder for all of your routing, so the path to your CSS files maybe something like ‘/css/style.css’, but because of Express that would be translated to something like ‘…/public/css/style.css’.
I would recommend that you create a new temporary folder for your style files that is at the correct directory level to work with the views. After you finish changes you’ll have to copy those files to the correct location for your node app. Bit of a pain, but a lot less code editing.
All the instructions for changing the path are right, but this will break the “build system” that’s wrongly setup by your developer. Of course you can change the path in Pinegrow, but what you need is a website with all links working out of the box.
It’s more simple then you think!
The HTML files have to be put in the folder that contains the website by the build system. What you have is a so called “build system” and your developer just has to change the location of the html files from the beginning in the build system and create the proper paths. That implicates that you have one folder containing the whole website that you can then open in Pinegrow or upload to your server.
I show you the build system I use at the moment to explain how it works. I opened it in Sublime text to make the overview a bit more easy.
Only your developer used some other names for the folders, but the principals are the same!
Hi @AllMediaLab,
Having the whole site in the public distributions folder poses security risks and bypassing of secure session handling, as users can then access files via direct url. For example https://website.com/admin.html. Yes you can have client sided verification, or write .htaccess rules but that should not be the go to option as A. its inefficient and B. client side verification is almost pointless. Having only assets publicly served is definitely a conventional ‘build’. Yes you can re-route Node to bypass direct URL access to certain files directly but some linux servers still overule nodejs routing, which then requires .htaccess rules in place. The beauty of NodeJS is that it does route the assets to the files on request, whilst keeping the directory secure from the public with correct protocols in place. Unfortunately not all IDE’s account for this yet, and by clicking ‘fix links’ on pinegrow causes illegal urls for the nodejs environment. I have personally used a development environment other than pinegrow that has accounted for this and maps the assets folder to the views folder according to the Node environment. It would be good to see pinegrow implement this. But as far as the build, the build is fine. Yes having the whole project in the distributions folder is a correct to, but as stated it poses security risks and/or possible bypassing of certain features or frontend functionality requiring server sided handling to begin with. The only reason this build would be ‘wrongly’ setup is it does not meet the criteria for front end development in pinegrow.
You have a point that is not explained well by me! This was just in my situation.
Of course you can place security sensitive stuff outside the root/dist of your project but then the links should still work when they are spit out by the build system!
It doesn’t matter on what location you want the parts of your website to be. For security reason or whatever! You can create the build system the way you want and create the links the way you want. My example is just my example and comes from the official Get Bootstrap website and is used by millions of users around the world. It’s only a example not “the system” but what I use.
I just finished a multi lingual website with 4 languages in 4 separate folders including 3 index files in 3 folders and 1 welcome index file for all languages in the root and a small shopping page outside the root. My build system was set up in a way that it all worked out of the box. In Pinegrow and on a real server. except for the PHP functionality that only worked in MAMP or life.
Imagine that I had to change all the links of the 160 pages website all the time, because my build system had put or the links in wrong or the pages on the wrong location.
When the build system is wrongly set up you get broken links and pages in the wrong location, that’s what I tried to explain.
It has nothing to do with the criteria of Pinegrow. All my websites work in Pinegrow no matter what the folder structure is, on my local server (MAMP) and my life server. So Pinegrow works perfectly with any website (It’s I think based on Chromium). A build system has to produce a working website.
Regards,
David
Example of payment page outside the root/dist made with the build system from my example seen in Pinegrow:
I totally agree with what your saying, infact I have already built this same build myself. But the point I am trying to make is, lets say this for a scenario:
You have your Security protocols written in NodeJS Server sided, written on url requests. Lets say you have your html files in the distributions folder, your secure route by node is https://website.com /admin-page, which then you have your tokens, embedded in the parameters of the url, (e.g. admin-page?auth=ablahblajsfasdijasid) this is fine and secure and follows the rules of your routing. But if its in a publicly distributed folder, it is easily by passed via direct access, admin-page.html (Yes you can re-route depending on your server or apply htaccess rules), where is if you have your routing in place, you can apply your rules of access. And that is why you have express.static (if you are using express) because that routes the site for public servings (by automatically translating from css/style.css to dist/css/style.css on request) such as front end javascript, assets and style sheets and creates the correct linkage. I still don’t agree this is incorrect as also there are millions of sites built this way, infact it is pretty standard with node sites and also generated by express.
I do agree with you aswell however, and I admire your payment methods page by the way, very beautiful.
