Running/Previewing HTML and JavaScript

Running HTML Applications

You can run your HTML/JS applications in Codenvy at Run > Run Application. When the app is started you will find a notification with the application URL in the Output tab:

[INFO] Application app-xam90fc0padqfmcf started on http://codenvy.com/ide/codenvy/_htmlapprunner/app-xam90fc0padqfmcf/

If you introduce some changes to the app, you can save the file and refresh the application page to preview them. There’s no need to re-run the app in this case. If you are done with previewing, stop the application at Run > Stop Application.

Preview HTML Pages

If you open your HTML file you can see preview icon. Press it to open a new panel in the bottom with a preview of your HTML file. Below is a simple example of HTML page and its preview:

<!DOCTYPE HTML>
<html>
 <head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
  <link href="styles/styles.css" media="screen" rel="stylesheet" type="text/css" />
<script src="js/script.js" type="text/javascript"></script>  <title>Sample Page</title>
 </head>
 <body>
  <b>This is a test</b><br />
  <img alt="Codenvy" src="http://docs.codenvy.com/wp-content/uploads/one.png" /></body>
</html>

preview1

Preview JavaScript

There is no direct way to preview JavaScript files in Codenvy. However, it is possible to reference JavaScript from your HTML file that you can preview. Here’s an example:

As seen in the code above, HTML document has a reference to a script.js file

<script src="js/script.js" type="text/javascript"></script>

A simple alert box has been added to script. js

alert("Hello! I am an alert box!!");

Now, when previewing HTML an alert box from script.js shows up first:

jspreview

Previewing HTML/JS pages is similar to running them, although it happens right in your Codenvy workspace, not in a browser’s tab.