Brackets - Live Preview not working - html

I found this awesome program(html editor) called Brackets and it's by Adobe.
Now reason why i got the editor was because i wanted to Live Preview PHP code, but i found out later that i needed a Wamp Server.
Now, i was in the mood of making an about page but i couldn't live preview. Live Preview Base URL is empty, and when i try to live preview, i get this: > http://puu.sh/aDkET/4209ec1192.png < and the lightning bolt is half orange(i heard it needs to be red to work). I have tried the lot... Entering as Live Preview Base URL to http(semicolon)//localhost:(insertporthere)/ <-- Wamp Server, tried only localhost, left it empty, I don't know how to make this work.. I am stuck and i basically need real preview..
Please, please help me! D: I have searched the internet looking for solutions, but no. If you can, a step-by-step tutorial would be much appreciated :)
Kind regards,
- PiguFilms

The Live Preview "Base URL" is the localhost URL that corresponds to the root folder of your project. Brackets uses this to map from a local path on disk to the server URL which serves up that same file: it takes the HTML file's path relative to the project root, appends that relative path onto the Base URL, and then launches the resulting full URL in Chrome.
So, for example:
If your page is at http://localhost/myapp/page.php and the page.php file is in a "myapp" subfolder of your project, your base URL is just http://localhost/.
If your page is at http://localhost/myapp/page.php and the page.php file is in the root of your project, your base URL is http://localhost/myapp/ (this way the path is "/page.php" relative to both bases).
If you think you have the Base URL set correctly but it's still not working, try going to the same URL manually in your browser to make sure your server is operating correctly.
More details on using Live Preview with your own local server can be found here: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.

although #ytpete's answer is the right choice for your problem but you need to do, as i say, first. In simple words, go to file(in Brackets), click open folder and now make the project directory exactly same as your local host server for php files i.e. C:\Program Files\Ampps\www\phpFiles (i am using Ampps and here 'phpFiles' is a subfolder inside which relies my php file and also html file too). Now you can follow steps shown by ytpete and you are set to live preview of your php file.

I had this problem as well. What I did was simply goto File->Open Folder... it all worked after all the necessary files were loaded into Brackets.

If you are using windows try running brackets "As administrator", worked for me

I had this same issue once I installed Xampp. This video resolved it for me. Essentially just select, File > 'Enable Experimental Live Preview' should have a check mark.

Make sure you don't have an internet bandwidth limiter (such as NetLimiter) running while using Brackets' Live preview.

I have just fixed this issue for myself, I had 'Experimental Live Preview' ticked under file. I unticked it and now it accepts my 'http://localhost/mywebsite' URL when I go to live preview.

This worked for me. I restarted my system and then unchecked "enable experimental live preview" in file.

this worked for me, and i don't remember where i saw it, but go to : cd $HOME/.local/share/applications and delete everything chrome related.
This worked for me, and i didn't dare to use live preview again.
On Ubuntu 16.04 LTS and Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Put your files in the same folder where you have index.html file

I have selected the option called "reload with extension" from Bracket's debug menu and that resolved live preview issue. More details can be found here.

For everyone, this problem can be resolved by following steps:-
On menu bar, go to File --> Open Folder (folder which have your html file for live preview)
Select Folder
Select your html file from left side bar for live preview
Click on bolt icon on right (preview button)
All it melts down to the fact, that you need that folder(which have your file) selected to view your output in live preview.
Let me know, if it helps someone. :)

It is because it doesn't find the 'html' file. Live preview basically needs html file to run it .In my case, I have a project made in php , my file name is index.php,I renamed it to index.html and it works like charm :)

Related

Why Does This Keep Happening To Me When I Do The Live Preview

Good Morning Everyone, So basically I have Brackets And File Zila, And I'm currently working on my final project however whenever I do the live preview in Brackets to check to make sure everything shows up and works correctly the url shows up as "http://127.0.0.1:61913/index.html" and my .html are all uploaded to file zilla and I'm connected to the server so I don't what's wrong I have tried to unconnect to the server and reconnect, I made sure that all the .html files in file zila match the same ones I have in Brackets and my wwwroot folder, and that I have the same images and favicon image as I do in Brackets as well. So if someone could please help me with this that would be great!
Live preview and your uploading your files to your own unique website are 2 very different things.
The live preview address is just your own IP (be careful showing this publicly, as it can be abused)
Live preview: preview of whatever file you are working on, only visible by you
Uploaded files through filezilla to your own website: public on your website, can be accessed by anyone
Keep in mind whatever changes you make in brackets that are shown in live preview are not visible on your website until you upload them through filezilla.

Anchor tag working locally, but not when deployed

Weird problem I'm running into... This anchor tag
<a target='_blank' href='jresume.pdf'>Resume</a>
is working fine locally. Opens a new page and loads my pdf file.
But for some reason when I deploy my site to surge.sh the link no longer works and gives me this error "No webpage was found for the web address: http://sitename.surge.sh/jresume.pdf"
if anyone could help that'd be great. Thanks
The first step I would take is to make sure the file is in the right place on your web server (have you actually uploaded the file to your web server?). I guess that'd be in the same folder as your index.html or the same folder as whatever html file is linking to it.
If that's not the problem I'd try changing href='jresume.pdf' to href='./jresume.pdf' and seeing if it makes a difference.

Pictures not showing up in site hosted by GitHub

I have a website hosted by Github and I am having issues with displaying pictures. I recently tried to upload new pictures but despite the path being right, the page fails to load the images and gives a 404 error in the source as it tries to find the path. Here is the repo of my site: https://github.com/jeanturban/jeanturban.github.io
I think it might have something to do with Picasa as when I download a picture from the internet and update the path accordingly it works fine. But when I try to use pictures from my computer, or if I try to export from Picasa to my "img" folder, then it breaks. Perhaps Picasa is making a hidden folder upon exporting the pictures that is not being uploaded? Anyone have any insight on this? Or a workaround?
It looks like your images are not loading due to the wrong file extension. You are trying to load "http://jeanturban.com/img/Current/light1.jpg" when it should be "http://jeanturban.com/img/Current/light1.JPG" -- notice the capital JPG at the end.
The issue in my case was my images where in a .attachments folder (coming from Azure DevOps) and I guess GitHub pages skipped hidden folders.
I had same issue but image case was not problem.
What fixed it was shortening image file name from 26 characters with three underscores to 16 characters and one underscore.
I had to change the path for where my media files were stored for my case:
before my file setup was:
-myusername.github.io
-->index.html
-->index.css
->media
-->myImage.jpg
after I changed it to the setup below, it worked:
I had to change it to this:
->myusername.github.io
-->index.html
-->index.css
-->media
--->myImage.jpg

Cross-browser URL to windows share [duplicate]

I have a .asp application where image files (.PDF) are stored in a directory (fed by a copier/scanner). The created file names are stored in a database table. When a query is launched from the web page a link to the file is created. When clicked the image should be displayed.
This functionality works 100% in Internet Explorer. No such luck in Firefox (and I have some Firefox users). The created hyperlink looks like this file://Server/Scanner/XYZ.pdf
The Firefox helps suggest the reason is this:
Links to local or network pages do not work. As a security precaution, Firefox forbids sites on the Internet to link to files that are stored in your local computing environment. These files may include files on your computer, mapped network drives, and UNC network paths
None of the suggestions for a workaround seem to work (or I am not understanding the steps to create the image display)
Any Suggestions?
This is the default Firefox behavior designed for security .The assumption is probably that most web sites don't know what and where are you local files (including UNC paths).
This could be turned off in firefox:
type "about:config" in the address bar and accept "i'll be careful"
find "security.checkloaduri" in older versions or "security.fileuri.strict_origin_policy" in newer versions of firefox and change the value to "false"
restart firefox
That should do it for you. You have more information here:
http://kb.mozillazine.org/Security.fileuri.strict_origin_policy
http://kb.mozillazine.org/Security.fileuri.origin_policy
Firefox >= 68.0.1
I'm able to preview in Firefox both images and PDF files with local file links using the settings mentioned here: https://bugzilla.mozilla.org/show_bug.cgi?id=1303727
I have used links with local file: test
and added in user.js the mentioned settings (with adjusted sites list):
user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "http://my.intranet");
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
Also, when setting Firefox to "Always ask" for PDF files, I was able to "Open with" the PDF in Adobe Acrobat Reader DC, which reported the expected local folder when accessing "File -> Properties".
Firefox >= 1.5.x < 20 (ish)
Search for the Firefox profile folder on your hard drive, e.g. (12345678 stands for eight random digits and letters):
Windows: "C:\Documents and Settings\Username\Application Data\Mozilla\Firefox\Profiles12345678.default\"
Linux: "/home/username/.mozilla/firefox/12345678.default/"
OS X: /Username/Library/Application Support/Firefox/Profiles/12345678.default/
In this folder create a text file with the name user.js. Write the following line into that text file:
user_pref("capability.policy.default.checkloaduri.enabled", "allAccess");
Works on my PC (Firefox 3.0.3 and 19.0 beta) with the following references:
<img src="file://///server/share/image.png" />
<img src="file://\\\server\share\image.png" />
<img src="file://d:\image.png" />
<img src="file:///d:\image.png" />
<img src="file://d:/image.png" />
<img src="file:///d:/image.png" />
<img src="file://localhost/d:/image.png" />
Also, if you are using the NoScript add-on, check the Advanced \ Trusted \ Allow local links option.
Reading at the solution given here, I followed the link Links to local pages do not work and for me, only this worked well (I am using wordpress for a personal FAQ on a local wamp installation):
Go to your "%Your Documents & Settings%\Application Data\Mozilla\Firefox\Profiles\%your profile%\"
edit the file "prefs.js"
add the following lines at the end of the document:
.
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
user_pref("capability.policy.localfilelinks.sites", "http://localhost");
user_pref("capability.policy.maonoscript.javascript.enabled", "allAccess");
You can leave the setting "security.checkloaduri" to its default value, and also the "security.fileuri.strict_origin_policy". Thanks to those 3 lines, you just make an exception for your local server.
Be careful, if you need to go back to that prefs.js file, note that Firefox will have ordered it alphabetically. So the 3 lines you will have added at the end will be somewhere at the beginning ;).
You can load the LocalLink FireFox Add-On, which allows you to right-click on a local link and select 'Open in Foreground Window'. The other 'Open...' menu items are supposed to work, but don't for me.
http://locallink.mozdev.org/
Also, you can use NoScript, like Alex suggests, which enables normal clicking of local links. Thanks Alex.
Marko's solution should work for links that are also on the local filesystem, but I don't think it should allow an http:// page to link to a file:// page.
The issue for people linking from http:// pages is discussed here:
http://kb.mozillazine.org/Links_to_local_pages_do_not_work
along with an explanation of how to circumvent it and expose yourself to risk.
You can instead read the file off the disk and then send it in the Response from your page.
See this link for an example.
Tonnes of thanks I wAs searching this solution since months,
::THis thing worked::
This could be turned off in firefox:
* type "about:config" in the address bar and accept "i'll be careful"
* find "security.checkloaduri" in older versions or "security.fileuri.strict_origin_policy" in newer versions of firefox and change the value to "false"
* restart firefox
::::
shouldn't you really store the pages in your application directory and reference them this way. http://SITENAME/Server/scanner/XYZ.pdf.
We do something similar with files stored all in one directory and just store the file name. we then create the link using the known folder name and append the file name. this works quite well.
Finally firefox is a lot more anal about the directions of the slashes in file names as well. Make sure they are all '/' rather than '\'.
Hope this helps.
beware of incompatibility with gmarks (google toolbar replacer)
both local link and policy manager worked for me; local link is a little smoother, policy manager gives you more control
file://localhost///servername/share/file.txt works for me on FF11
(from a local html file: file:///C:/index.html)

<input type="file" /> not showing files path

I have a file uploader but it's not showing the files path (so you can only upload files that are in the same folder)
How can I make it so show's the files path (desktop/something/yes/dog.swf)
It's getting more common that browsers doesn't reveal the local path where the uploaded file was selected, and this is for most purposes a good thing. If you upload a file to a site you probably don't want any excess information to be sent along, like for example your local user name.
For you as an application developer it should not make any difference. You shouldn't rely on the local path of the file for anything. If you use the local path on the server side also, you open up a horribly wide security hole. Anyone could for example upload a file with the path "c:\windows\explorer.exe", and if you save the file there you are in trouble...
If I'm reading this right, that's a client side browser issue, and not something you can set in your code.
It's also browser-specific, so we would have to know the browser version to tell how to do it on YOUR browser, and that would do nothing for other people accessing the web site via their browser.
If you want to ask how to set it on your browser, I would recommend that you ask that on the Super-User site. (See the links at the bottom of this page.)
Did you try to upload a file from another folder? I've noticed that no path is shown but it still works just fine.