Playgrounds like Esri’s SDK for JS 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 a hypothetical “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: https://detwilergeog863.free.nf/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'm able to 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.
- 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.)
- 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.
- Create another blank text file, copy your CSS code into that file, and save it as main.css, again in the hello_map folder.
- 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. 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>
To reference your JS code, add the following line after the line that references Esri’s SDK for JS:
<script type="module" 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.
In the past, at this point I've suggested that you open the local copy of your app in a browser (which means opening it using the file:// protocol rather than http://), make some edits in your editor, then return to the browser and reload the page to see the result of your edits. And I further suggested that you might iteratively develop your app in this back-and-forth manner before ultimately uploading it to the web server when you're satisfied and ready to share it.
However, a recent change to Esri's samples has been to declare the script element that houses the app's JS code to be of type="module". One benefit of JavaScript modules is their ability to import and re-use code from external libraries. But this ability opens browsers up to cross-site scripting attacks, so they are configured to disallow the execution of code in a JS module loaded with the file:// protocol. (You might try loading your page and looking at the Console in your browser's Developer Tools to see the error.)There are a few possible solutions to this problem:
- You can upload your files to the web host you're using for the class. The page will be loaded using http:// rather than file://, so problem solved. The trouble with this approach is that it makes iterative development very tedious.
- You can configure your machine to be a web server. This will also cause the page to be loaded using http://. If interested in going this route, you can search the web or ask an AI tool how to do this.
- The popular VS Code development environment has a Live Preview extension that allows you to load local pages via http:// without any additional configuration. And given the other benefits to using an editor like VS Code, this is the route that I suggest you take.- So, unless you already have your machine configured as a web server and/or already have VS Code, download it here and install it.
- Extensions are loaded in VS Code by clicking the bottom button in the toolbar running along the lefthand edge of the application. Search for and install the above-mentioned Live Preview extension.
- Connect to your hello_map folder in VS Code by going to File > Open Folder.
Have a look at your page by clicking the Show Preview button in the upper right of the code editor pane. (See figure below.) Note that this button is only available for .html files, not .css or .js files.
Figure 4.2 Accessing the VS Code Show Preview button Image developed by J. Detwiler © Penn State with ArcGIS and licensed under CC BY-NC-SA 4.0- With the preview open, try making a change to the JS code, such as modifying the zoom or center properties. You should see that the preview updates automatically.
- The preview can be closed by going to the ... menu in the upper right of the preview pane and selecting Close All.
- To publish your app to a public facing location, open a connection to the www (or htdocs) folder of your web host (using either FileZilla or the web host's file manager).
- Replicate the directory structure you have locally by creating a folder called hello_map.
- Upload the three files associated with the app to that folder.
- Test the app by pointing your browser to <yourwebspaceURL>/hello_map, replacing <yourwebspaceURL> with your website you created.
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.