Sublime Forum

Preview in browser on local test server with localhost?

#1

I’ve been searching and searching for a way to do this, but I haven’t been able to figure it out yet. Is there some way to preview files in your default (or alternative) browser with localhost/ ?

Currently if you hit F12 some documents, .html, .pngs, etc will open with their respective default programs. It would be nice to be able to hit F12 or another hotkey combo to preview a file from it’s directory location on localhost/.

Is there a way to do this?

0 Likes

SideBar Enhanc.. (Clipboard, Open With., Reload renamed)
#2

Perhaps using the Prevu package?
github.com/Nijikokun/Prevu

0 Likes

#3

Yeah, that’s cool and all and I have it installed, but if I’m understanding things properly, you need to add a comment to every single document you want to preview which doesn’t do a whole lot for streamlining the workflow. Ideally you would just want to be able to specify the root folder in the test server settings for the project like you can in (ugh) Dreamweaver. Hit F12 to preview in your default brower (or alt/F12 in an secondary browser) any document that falls within that folder or subfolder.

0 Likes

#4

This is added by “SideBarEnhancements” package
quote:

F12 key allows you to open the current file in browser.
If you want to add a url to that feature: Right click the sidebar -> project -> edit project

There add the new preferences:

, "url":"http://localhost/" , "url_production":"http://domain.test/"
“url” allows you to set the url of your local server, opened via F12
“url_production” allows you to set the url of your production server, opened via ALT+F12

an example of my project file

[code]{
“folders”:

	{
		"path": "/C/Documents and Settings/tito/Datos de programa/Sublime Text 2/Packages"
	}
],
"url":"http://localhost/",
"url_production":"http://example.test/"

}

[/code]

This will only work with the latest version, update and be sure to restart sublime.

There is also other packages which add a more convenient “browser preview”, for when you needing to check a lot the result.

[edited] for clarification

0 Likes

Keyboard shortcut to preview file in browser?
#5

You’re a champ tito! Works perfectly :smile: Thank you.

0 Likes

#6

Hi There,

I’ve followed the instructions above to get this working and it does so fine when i first open the project. If i don’t ‘save’ the file i can preview on both the localhost and production urls without issue but if i actually ‘save’ the document after any changes this functionality fails and previewing in any way, shape or form cannot be performed unless i restart Sublime. Is this an issue anybody has had? Naturally this makes working very difficult if in order to preview files effectively i have to restart Sublime after each file ‘save’.

I’m using Sublime Text 2 on Windows 7.

Any help or advice would be greatly appreciated.

Regards

Brendan

0 Likes

#7

Hello,

I’ve installed SublimeText a day ago. I have installed the SideBarEnhancements plugin and it’s working ok, but following this thread I am not able to open the htm files on localhost using F12. They are opening in local file mode ([file://D:/…](file://D:/…).). I have no clue why.

Furthermore, I have my default system browser set to Firefox and I like it this way. However, I am developing mobile apps using SenchaTouch. That framework requires to preview the files using a webkit browser (Chrome or Safari). So I’d like to somehow specify to open my htm files using a specific browser and NOT my default browser when I press F12. Is that possible? Can someone tell me how?

And then there’s still the missing question, why my localhost is not previewing, but only local files (as I mentioned above).

Thank you!

0 Likes

#8

github.com/titoBouzout/SideBarE … ts#f12-key

0 Likes

#9

If I’m understanding this correctly your projects working directory has to be inside web root of your local testing server? Normally you’d have a working directory and push the files to a separate testing server folder in web root for preview?

0 Likes

#10

That is not necessarily true, with build systems you can do separate folders and push with commands.

0 Likes

#11

Any documentation in the public domain on how to do this ??

0 Likes

#12

Be sure the Makefile is accurate and doesn’t do anything you don’t want. A wrongly configured Makefile can

Sure, similar to the following.

  1. Create a new project file Project->Save Project As into your working directory

  2. Then you would create a new build system, that should look similar to the following
    https://hastebin.com/equcusohut.json
    Generally saved in Sublime Text/Packages/User path

  3. Then you create a Makefile in your project directory which could look like this
    https://hastebin.com/inapibocor.makefile
    Note this Makefile with first DELETE the entire contents of you PUBLIC repository then copy over your SOURCE to the PUBLIC.
    Make sure you update the SRC and PUBLIC paths

0 Likes

#13

Thanks … Think I’ll struggle but I’ll give it a try

0 Likes

#14

We are here to help, if you need a more detailed how-to or something. Reach out. The discord server is very helpful too

0 Likes