Real-Time Preview not loading JS/CSS files

Report · Mar 12, 2017

Hi All,

I've been working with Real-Time Preview for the past 2 weeks to build up a HTML page from scratch without any JS. Now I want to merge this HTML code into an existing page that I was creating using Brackets. Now I want to switch to DW (2017.0.1) because of the Real-Time preview which I think is pretty awesome. Now, when I want to show the index.html of the original page none of the linked js or css files are found (hat no issues with Brackets). The error is always 404.

For example for angular.min.cs:

Request URL:http://127.0.0.1:61887/bower_components/angular/angular.min.js
Request Method:GET
Status Code:404 Not Found
Remote Address:127.0.0.1:61887

I guess the reason is that the index.html is loaded in a different path: http://127.0.0.1:61887/preview/app/index.html

Here is the header of my page.

<!DOCTYPE html>

<head>

...

...

</head>

...

How can I tell DW to use the linked files (i.e. scripts) for the real-time preview as well?

Regards,

Stephan

Report · Mar 12, 2017

You need to define your site in Dreamweaver. Have a look at How to make a website in Dreamweaver part 1, site setup | Adobe Dreamweaver CC tutorials

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 13, 2017

I defined a site already. Looking at the link I only stumbled upon the default image path. Please have a look at the image below. Still it is not clear to me why angular.min.js and all the others are not found in the real-time preview.

Report · Mar 13, 2017

Just a thought, but do any of the files require access privileges to your testing server?

Report · Mar 13, 2017

I don't use a testing server. But maybe this is my error in reasoning. Coming from Adobe Brackets, I was used to start the website in Google Chrome. The site was loaded in a node.js container so all the files and folders in the root directory are accessible right away. No issues there. I thought that the real-time preview in DW CC 2017 kind of works similar.

I just want to view my site in parallel in different browsers while developing.

Report · Mar 13, 2017

Sorry, but we have found that the only reliable way to use real time preview is with a testing server. This is especially true with IE and Edge.

Report · Mar 13, 2017

OK, got that. So I created a web app on Azure, set up FTP connection and created a test server for my site. Cloaked all the unnecessary files and uploaded the rest. Opened the URL and voilá, I can now see the site. Automatic upload after save works as well.

What still puzzles me is my original question. How to use real-time preview now. If I try to start RTP from within DW the browser (either one) starts up and keeps loading forever. The site is never loaded. So before, I could at least see the logo. Now, nothing is shown at all. Looks like there is still something todo after setting up the test server.

Report · Mar 13, 2017

The problem with testing server is that they are all different.

Did you define your testing server in your site definition?

Report · Mar 13, 2017

Yes, I did.

Server Model is set to None,

Automatically push files is enabled,

Always autosave dependent files is disabled

Report · Mar 14, 2017

I'm not certain if setting the server model to none, will work in Dw, as it does expect a server to be defined. I do know that the Azure server is not included in the list (just checked), so that may be a problem.

The problem i have always had with Dw, is that once one moves away from the commonly used environment, (including more advanced html, css and javascript) Dw has little support for them. It is primarily aimed at designers, with a basic code skill.

Report · Aug 08, 2017

Your answer actually opened my eyes. You are right. DW is more for designers. So what I did in the last weeks/months now is to use DW for creating all the HTML code and CSS files. Then I copied over all this into a separate project and started to add my JS code (using Visual Studio Code). When I wanted to change the UI I went back to DW and copied the changes, if I liked them, over to the other project. This workflow really worked very well and helped me to keep my actual production code clean from trying to build sth. in that in the end didn't look good.

Report · Aug 09, 2017

You are now using a similar workflow to the one i used a few years ago. I now just use VS Pro, mainly because Dw can no longer meet my network requirerments and is missing lots of other features that i find essential. I don't normally recommend people posting in this forum to move completely away from Dw, (it is the Dw forum ) unless i know there is no other workable option.

Dw at the moment is i think trying to "up its game" but in doing so only getting the requirerments correct less than 50% of the time. This may be due to many of those in 'decission making roles' not actually being aware of exactly what is required to correctly implement a workflow or feature, and are being advised exclusively by people who are still creating sites as though old rwd and workflow methods where the only way forward.

It may be worth you posting what you think is missing in Dw, as unlike a few years ago Preran and other Adobe staff do now read these posts and provide feedback to the Dw team.

Report · Aug 09, 2017

brainchest wrote
Your answer actually opened my eyes. You are right. DW is more for designers. So what I did in the last weeks/months now is to use DW for creating all the HTML code and CSS files. Then I copied over all this into a separate project and started to add my JS code (using Visual Studio Code). When I wanted to change the UI I went back to DW and copied the changes, if I liked them, over to the other project. This workflow really worked very well and helped me to keep my actual production code clean from trying to build sth. in that in the end didn't look good.

You should not have to do that BUT sadly there aint no one web-editor or IDE on the planet that gets it ALL right. I've tried to find one and where one excels at something it fails at something else, which another excels at.

Unless you're a seasoned pro and can write code with your eyes shut (there's isnt one of those on the planet either) in notepad, it's a case of either sticking to the best editor you can find for your workflow of a somewhat really bad bunch or using several editors to do different tasks, appalling in this day and age.

DW is no better or worse than the rest, infact I'd go so far to say it's far better than a lot, especially these free ones like Atom, Sublime, Brackets, not tried VSC, because they have zero file management incorporated. Infact I'm not sure why they are so popular given the lack of a basic requirement. Maybe developers overlook this becasue of the price tag.

Onwards and upwards, still waiting for some company to produce a product which is not bloated full or stuff you don't require or is so bereft and not kept up-to-date, it's practically useless.......

I certainly do not relish transfering code back and forth from one editor to another, just to get simple tasks done.

Report · Aug 09, 2017

VS Code is free, and i am willing to forgive a lot of missing features if something is free, when a program is charged for, (and Dw is certainly not cheap) i don't forgive anything. I may understand why something will be wrong or missing, but only for a very short time.

VS Code does have ftp and file managment extensions, but is project based which has different file managment requirerments to a site based workflow.

Report · Aug 09, 2017

pziecina wrote
VS Code is free, and i am willing to forgive a lot of missing features if something is free, when a program is charged for, (and Dw is certainly not cheap) i don't forgive anything. I may understand why something will be wrong or missing, but only for a very short time.
VS Code does have ftp and file managment extensions, but is project based which has different file managment requirerments to a site based workflow.

You know what I'm willing to pay top-dime for something which provides the basics.

A few very simple examples of abject failure and roaring success:

FREE

Brackets: Simply excels at prefixing your css files with a nice Autoprefixer plugin that is evoked on saving the css file.

Completely useless for file managment - development of the product is slow, has not moved on much in 2-3 years.

PAID FOR:

Dreamweaver/PHP Storm/BBedit: - Simply fail at css prefixing, nothing out of the box.

Dreamweaver and PHP Storm excel at file management - BBedit it's non-existant.

I don't really want to keep sticking my css into Brackets and having it prefixed automaitcally then moving it back to PHP Storm or Dreamweaver or BBedit etc and NO, I don't want to use SASS or LESS to do this simple task. So if I want to keep it all in the same editing environment I have to resort to something like Prepros, just another PITA to manage.

FREE

Atom/Sublime: The most apalling workflow to make snippets - who want's to open up a json file and mess around inserting code into it in the correct fromat, otherwise the program throws an error - (I believe VSC is the same in this respect)

FREE

Brackets: Has at least 2 plugins for making snippets, yet no option for a floating snippets panel, you have to remember what you called the snippet to evoke it when typing in the editor, or keep popping up and then shutting the snippets panel. A simple discret floating pallet is the answer, as in Dreamweaver or BBedit.

Brackets has no abilty to create wrapping snippets - really?

PAID FOR

Dreamweaver/PHP Strom/BBedit/Coda

All four have excellent workflow for creating snippets. However the much acclaimed PHP Storm has no snippets panel unless you evoke it by some awkward keyboard movements, which shows the snippets list briefly and then disappears again. Infact I havent seen an editor which can handle the making of snippets as good as BBedit, yet BBedit fails in almost every other area.

Dreamweaver as far as I know has no abilty to create wrapping snippets - really?

Coda has not kept up with current web development trends, even though its still a paid for product.

FREE

Brackets: Has no 'open in browser' feature by default unless you want to open in 'live view' Chrome which then gets injected by Adobe code - a complete and utter mess. Come on, seriously you can't stick out an editor FREE or PAID FOR which doesnt offer a basic 'open in browser of YOUR choice' button in this day and age.

So there you have it. I aint even arrived at the first fence yet and all the above mentioned editors, plus some, fail miserably in some area or another. All these very basic features should be incorporated in every editor on the market and the simplicity of how they work should be taken for granted in the modern world of web devlopment.

Need to get the very basic requirements right first and then get to the fluffy add-ons and there isnt one single product out there that seems to knows what the basic requirements are.

Report · Aug 09, 2017

osgood_ wrote
Need to get the very basic requirements right first and then get to the fluffy add-ons and there isnt one single product out there that seems to knows what the basic requirements are.

Let's be honest, even in this forum, (and pre-release) most people do not consider anything that is not usable in IE8 as a requirement, or workflows that are not single developer orientated, and i suspect most other products suffer from the same problem.

Report · Aug 09, 2017

pziecina wrote
osgood_ wrote
Need to get the very basic requirements right first and then get to the fluffy add-ons and there isnt one single product out there that seems to knows what the basic requirements are.
Let's be honest, even in this forum, (and pre-release) most people do not consider anything that is not usable in IE8 as a requirement, or workflows that are not single developer orientated, and i suspect most other products suffer from the same problem.

I'm thinking of trying UltraEdit for Mac next and seeing how that shapes up against the rest, although I can't find much info about that editor, so maybe that means it's no good.

I have to laugh.........at the moment I'm back in BBedit, gone full circle, a very basic, no frills web editor, relying on my coding skills. I'll use the IDE's I have at my disposal if I'm planning anything which might be a bit more complex to what I normally do, or I need to evoke some file management. I'm a mid-range html/css/php/javascript coder so do I really need a big IDE stuffed with bloat, probably not - what I need is a mid-range web-editor/IDE, that is slick and fast and has simple workflows, not awkward or overly complex ones.

Report · Aug 09, 2017

Let me know if ultraedit is any good, i'm looking for a new laptop and once i retire completely, (taking hols etc now) a simple ide. So a Mac book is a possibility.

Report · Aug 09, 2017

pziecina wrote
Let me know if ultraedit is any good, i'm looking for a new laptop and once i retire completely, (taking hols etc now) a simple ide. So a Mac book is a possibility.

Its on my radar to test. But I don't know how the Mac version differs to the PC version. The PC version has been around for years, whilst the Mac version came along later and I think is still playing catch-up. However both are in active development which is what I look for in a company that provides a web-editor/IDE solution. I have no faith or confidence if an editor has had no significant update for 2/3 years and looks to be dead. You just cant affprd to do that in a fast moving environment.

I'll let you know if/when I give it a go. Mainly I'm looking also for recomendations from anyone on a Mac that has tried that version, they seen few and far between as opposed to the views about other editors.

I've also still yet to try out DW2017, which I may do at some point also, just to at least convince myself of the direction in which that is going.

Report · Aug 09, 2017

osgood_ wrote
I've also still yet to try out DW2017, which I may do at some point also, just to at least convince myself of the direction in which that is going.

Wait until 2018 is released, it is only a couple of months away, I cannot use 2017 as i find the ui colors and contrast to be so annoying.

Real-Time Preview not loading JS/CSS files

1 Correct answer

Photos