With Ruby on Rails I can run rails s -p 3000 and preview my site at localhost:3000.
With React I can run npm start and view the site at localhost:8080.
What if I just have html and CSS files, how do I preview that?
On OSX, you can run a simple web server from any directory using this command:
python -m SimpleHTTPServer 8000
Then, you can hit the directory in your browser by going to http://localhost:8000/path/to/file.html
You can try click 2 times in index.html to open the file in browser.
Every time you update the code in sublime text, you need to reload the browser and the updates will be aplied.
This usually depends on your device/OS and what your eventual goals are, but usually you can either use (online) software that renders the HTML and the CSS for you (such as Brackets.io, etc.) whilst you are typing it (to live preview any modifications/additions), or you can put the documents live using a local webserver such as Xampp or OSXs built in simple web server, and check their respective localhost locations every time you save changes using your code editor.
You could also simply use online applications like Codepen, which can also render HTML and CSS, and even JavaScript. Codepen just today launched Codepen Projects which allows you to create entire website projects at their website. It is however, a pro (paid) feature.
Here's a short overview of code playgrounds that offer the functionality you requested (by no means an exhaustive list):
JSFiddle
CSSDeck
CodePen
JSBin
And ofcourse you can insert Snippets here on StackOverflow, which is also able to render HTML and CSS (and JS).
If you really only use HTML and CSS, previewing in a browser is also possible, opening the .html file by double clicking and opening in Internet Explorer, Chrome, etc.
Related
I have a project that loads http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js, I want to be able use this project offline
I tried to download dojo.xd.js and link to it locally but this still doesn't work offline
In firebug, on the net tab I can see that there are a lot more .js files that load
Is there a simple way of making this work offline?
The way of integration depends on your way of using it.
I assume you have webserver running locally (without inet access)?!
At the dojo website there are several ways of dojo integration available. Just download one of them (do not use CDN) and put the file on your local web server. Then it is available through the local url (can be relative to your site).
If you wan't to build an "offline" app without a webserver then take a look at Adobe AIR and interation of the dojo toolkit with Dojo Extensions for Adobe AIR.
Another option might be the integration together with PhoneGap or Cordova to build an offline App, e.g. for an IPhone etc. with HTML/Javascript. Win8/RT Applications for the M$ AppStore does support HTML/Javascript, too (have not tested this with Dojo).
Keep in mind there are also some security restrictions (e.g. loading and execution of JavaScript) if you plan to "release" your app as simple html file (click to open in browser).
Right now, the directory of my module is defined as an IIS virtual directory and IIS serves the files.
I was wondering whether IntelliJ has an internal web server, which can serve the files, without the need for any third party. Eclipse does.
UPDATE: built-in web server is available in the recent IntelliJ IDEA versions (starting from 13). You can find more details in the blog (yes, this feature first appeared in WebStorm).
IntelliJ IDEA has no this feature, you need to install and use any third-party web server that can serve the content from the project folders.
A built-in HTTP preview server will be part of Intellij IDEA 13 and is already available in the EAP: http://youtrack.jetbrains.com/issue/WEB-7148
"All existing actions — preview in browser (pop-up over html file or menu action or
shortcut), open in browser and create/debug html file action now open file on built-in web
server
http://localhost:63342/<project name>/<file path relative to source or content root>"
In other words, right-click on an HTML page and select "Debug" or "Open in browser", and IDEA 13+ will serve up that page via port 63342.
Here's another super simple option, install Python: http://www.python.org/getit/
Then open a shell prompt, navigate to your root web folder (e.g. public) and run python -m SimpleHTTPServer - This starts an HTTP Service on port 8000.
Further reading should you need it: http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python
I've got mine running on Windows 7 but the above article still applies.
Another option is is create a PHP project that, starting with v 5.4.0 of PHP includes a built in web server. This page explains it all ...
http://www.jetbrains.com/idea/webhelp/php-built-in-web-server.html
IntelliJ IDEA has a built-in web server that can be used to preview and debug your application. Just watch this YouTube video or follow the steps below.
Option 1
You need to add new 'JavaScript Debug' configuration:
Click Add Configuration... or Edit Configurations... in the Navigation bar
Click button in the toolbar or press Alt + Insert to create a new configuration
Select JavaScript Debug under the Templates node in the tree view of run configurations
Fill in Name, URL, Browser and click [OK] to save the configuration
Use http://localhost:63342/YOUR-PROJECT-NAME/index.html for URL
Now you can run the configuration:
Click run or debug button in the Navigation bar (or use Shift + F10 / Shift + F9 hotkeys).
Option 2
Running web page in browser without creating a configuration. Refer to the related IntelliJ IDEA Help article.
In the editor, open the HTML file. This HTML file does not necessarily have to be the one that implements the starting page of the application.
Do one of the following:
Choose View | Open in Browser on the main menu or press Alt+F2. Then select the desired browser from the pop-up menu.
Hover your mouse pointer over the code to show the browser icons bar: . Click the icon that indicates the desired browser.
Result
Google Chrome browser with a demo web page served by the Intelij IDEA's built-in webserver:
One simple way is to create a NodeJS / Express project in IntelliJ that is your web server. You can then use it to serve your static web pages and any other web content. The NodeJS web server is very small and runs fast - noticeably faster than IIS and Apache. Best of all you can just hit the Run button in IntelliJ or WebStorm to start it up.
By default, a NodeJS / Express project includes a public/ directory that you can use to contain your static pages that you can then view from http://localhost:3000/
This explains the steps required to enable NodeJS in IntelliJ and includes links to other Node resources:
http://www.jetbrains.com/idea/webhelp/node-js.html
If you feel the need, you can reconfigure your NodeJS server using server side Javscript code. You can add SSL support or almost any other server side features you care to dream up. Just add NodeJS modules using the npm (Node Package Manager) command line tool included with the install. NPM Registry https://npmjs.org/ indexes all the available modules.
You can configure IntelliJ to use a lot of different application containers, but each of them must be downloaded and installed separately. I currently have mine configured to serve via jetty, like eclipse, and also tomcat, tc-server, jboss, and node.js. It's pretty easy to set up.
When a user downloads a plugin firefox (for example) the plugin installation begins as soon as the download has completed.
Is it possible to achieve the same thing in safari? i.e. user clicks link to download plugin, once it has downloaded it automatically begins the installation.
I don't think this is possible to do on any other domain except extensions.apple.com.
I've done some extensive testing on this and the safari.installExtension() method is only present if the domain matches extensions.apple.com (probably controlled by the browser, similar to how certain Chrome APIs only shows up inside of extensions themselves).
I tested this theory by going to the JS file itself and opening the JS console:
https://extensions.apple.com/home/scripts/extensionInstall.js
After that JS file has loaded, type typeof(safari.installExtension) in the JS console and it should return "function". Notice that it exists on a non-HTML page, meaning it's being provided by the browser (since this script doesn't execute, nor has the code in it to provide this method).
I tried doing this on other sites and it doesn't exist: "undefined".
I also had a crazy thought that it just needs extensions as the subdomain, so I tested it on http://extensions.joomla.org too, no dice. I can't seem to find an extensions sub-domain that's SSL though. That may work, but I seriously doubt it as the method appears to be regulated to only show up when on Apple's specific extensions sub-domain.
No solution for that here, but maybe this can help?
In apple extension gallery at https://extensions.apple.com the extensions do install in one click, and i wanted to achieve the same in a website of mine, so i went and checked their JS source code.
A javascript file there defines a "ExtensionOneClick" Object (https://extensions.apple.com/home/scripts/extensions.js).
A method is dedicated to installing extensions:
// href : path to the extension ".safariextz" file
// id : com.whatever.myextension-<safaridevelopper10charsid>
safari.installExtension(id, href);
I tried to replicate this on my website, but i get "safari is undefined", so I guess a site specific hack in Safari is helping here?
Im building an AIR application using the HTML/JS SDK.
I can include scripts and stylesheets as long as they are in the same folder as my website, but no remote content fetched from the Internet can be included ! No remote scripts, neither from jquery nor from google... I put <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> and nothing happens ! It is the case for every file, not only this one.
Have you ever run into this issue ? In the AIR documentation they seem to present us with big mashups and remote inclusions all the time, still it won't work for me !
You can definitely do this in AIR, but you need to work around the security restrictions as by default you can't do this from the first frame that is loaded. Thankfully it's not too hard.
You need to create an iframe in your main html page (e.g. index.html) and load all of your content into this. Your main html page then acts as a controller of sorts allowing you to call methods which require enhanced security permissions (file system etc..), while any code loaded into the iframe is allowed to load external media and scripts and also allowed to use JavaScript eval and other methods which are otherwise blocked in the main frame of the application.
You can read about it here http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7f08.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7f07
Read the full page so you understand the concept, but pay particular attention to the sandboxRoot and documentRoot attributes when you are setting up the iframe.
I have an ubuntu installation on my laptop i use for web app development. When i type in http://localhost/blah.php i see my php web page as i normally would with all css style loaded and rendering fine.
When i try to connect to this same apache server from a remote machine by typing in the IP address the page loads but without any css styling at all. I also get the same problem trying to connect to the apache server from a virtual machine on the same box. I would like to get this working so i can test my web apps in IE but obviously css not loading is a problem. Any tips ?
Look into your source code and look how your style sheets are referenced.
If you have references to http://localhost/mystylesheet.css, that's your problem right there.
If that doesn't help, try to access a style sheet directly (enter the address in the browser) and tell us what happens. Also post the URL you are using. The head of the HTML document you are calling would also be helpful.