GEOG 863:
Web Application Development for Geospatial Professionals

4.4 Move Your Code to .html, .css, .js files

PrintPrint

4.4 Move Your Code to .html, .css, .js files

Playgrounds like Esri’s JS SDK sandbox and CodePen are great tools for experimenting with samples and developing your own apps from scratch, but when you want to “go live” with an app so that others can use it, you’ll want to host your code on a web server. You used a web hosting service in the previous lesson and we’re going to use that service again now.

When building apps, a convention that many developers follow is to create a folder on the web server for their site/app and into that folder place an HTML file called index.html (or default.html). For example, in building my “app_to_end_all_apps” site, I’d create a sub-folder by that name in my www folder, then upload my app’s HTML markup in a file named index.html to that sub-folder. I could then view my app using the URL: http://detwilergeog863.000webhostapp.com/app_to_end_all_apps/. (Note: This app doesn't actually exist, so you should expect a File Not Found error if you follow the link.) I could omit the index.html from the URL since browsers are built to look for a file by that name when the URL ends in a folder.

  1. On your computer, wherever you’re storing your coursework, create a folder called hello_map. (The name for this app is a play on computer programming's "Hello, World" tradition.)
  2. Create a new blank text file, copy your HTML code from CodePen into that file, and save it as index.html in your hello_map folder. Be sure to add a <!DOCTYPE html> line at the top of the file to declare your code as HTML 5.
  3. Create another blank text file, copy your CSS code into that file, and save it as main.css, again in the hello_map folder.
  4. Finally, create a third text file for your JS code. Call it main.js.

    Unlike the CodePen environment, the end user’s browser won’t know that there is a CSS file and a JS file that goes along with the HTML file unless you tell it.
  5. To reference your CSS code, add the following line above the line that references Esri’s main.css stylesheet: 
    <link rel="stylesheet" href="main.css"></link>
  6. To reference your JS code, add the following line after the line that references Esri’s JS API: 
    <script src="main.js"></script>
    Note: These references use relative paths to locate the files; the browser will look for the files in the same folder as the HTML file since no folders were included in the paths. Because the architecture of this app is not particularly complicated, I’m directing you to store all of the files together. But you should keep in mind that many developers prefer to store their files in sub-folders (e.g., css/, js/ or styles/, scripts/) for organizational reasons.
  7. Open this local copy of your app in a browser (right-click on the file in Windows Explorer and select Open with). As you develop your app, you can leave it open in your browser and Refresh (F5) whenever you want to see the result of your changes.
  8. To publish your app to a public facing location, open a connection to your www space on the 000webhost web server (using either FileZilla or the 000webspace File Explorer).
  9. Replicate the directory structure you have locally by creating a folder called hello_map.
  10. Upload the three files associated with the app to that folder.
  11. Test the app by pointing your browser to surnamegeog863.000webhostapp.com/hello_map, replacing surnamegeog863 with your website name.

For extra practice, go through the process of copying the 3D sample code to CodePen and then create a site called hello_scene in your web space.