How to Put Your HTML5 Game on a Server

By Andy Harris

To put your HTML5 game on a web server, just do a quick web search for free web hosting, and you’ll find plenty of places to put your code online for free or for a very low cost. For current purposes, a free hosting plan should be fine.

The biggest downside of a free service is usually its dependability. Typically, when you pay even a little bit for a server, you get much more reliability.

How to upload a game page with a control panel

Although you can often do basic HTML and JavaScript editing right on the server, it’s usually safer and easier to do most of the work on your local machine. When you’re ready to distribute your program to the world, you can use the cPanel application. Here’s the process:

  1. Prepare your game on the client machine.

    Be sure that everything is working pretty well on your local machine first. If possible, organize your application to be as self-contained as possible. Put all resources used by your game in the same directory, and have only the things you need in the directory.

  2. Consider using relative references.

    Code all links to images or external files in your game as a local reference. This way, if you move all the files together, the references will still work on the local server.

  3. Log on to the control panel.

    Use the logon information provided by your service to log on to the control panel application using your normal web browser.

  4. Find the file-management tool.

    There will be some sort of tool for file management.

    image0.jpg

  5. Navigate to the web directory.

    Most servers have a special directory that is exposed to the web. You may need to check your documentation to find out exactly where you are supposed to put your files.

  6. Make a subdirectory for your game.

    It’s best to make a subdirectory containing all the files your game needs when you build the game on your own machine. You can then create a similar subdirectory on the server and copy all files to the server at once.

  7. Upload all your files.

    Remember, a game normally consists of several files — the HTML/JavaScript code, the simpleGame.js library, your image files, and all other external CSS or JavaScript files. Be sure you copy all these files to the server, or things will not work correctly.

  8. Test on the desktop browser.

    Use your desktop machine’s browser to check that your server is working correctly. Your service provider will indicate the address of your main site. You’ll probably want to build some kind of index page on your main site to point to each of your games. Check with your standard browser first to be sure that you know where your game is and what the URL is.

  9. Test on the mobile device.

    Use your device’s browser to check the game. Some devices have multiple browsers, so you may want to check on more than one to ensure that the game is working correctly.

How to use an FTP client to share your game

Because you’ll often be transferring a large number of files, it might be easier to use a special tool called an FTP client. To use FTP, you’ll need some sort of FTP client. FileZilla is free, easy to use, and it works exactly the same on all major operating systems.

image1.jpg

FileZilla and other FTP programs all do pretty much the same thing. Here’s how to use FileZilla:

  1. Download and install FileZilla.

    You can download FileZilla for free.

  2. Gather the logon information.

    You’ll need to get your FTP logon information from your service provider. Normally, this consists of a special address (like a URL, but it begins with ftp://), a username, and a password. These are not necessarily the same credentials used to log on to the server.

  3. Enter host information.

    There’s a place along the top of the editor to enter your logon information. Put the address (which usually begins with ftp://) in the host box, with your username and password in the other boxes. You can typically leave the port box blank because this information is normally determined automatically. (If in doubt, try port 21 or 22.)

  4. Connect to the FTP server.

    Click the Connect button to make the connection. A flurry of obscure messages will fly through the top panel. In a few seconds, you’ll see a directory listing of the remote system in the right panel.

  5. Use the left panel to manage local files.

    The left panel controls the local file system. Use this to find files on your local computer. It’s a normal file-management system like my Computer or Finder.

  6. Use the right panel for remote files.

    The right panel controls the remote server file system. It works exactly like the local system, except it allows you to manipulate files on the remote system. Use this system to move to the appropriate directory on the remote system.

  7. Drag files to transfer them.

    To transfer files between machines, simply drag them. Drag from the local machine to the remote machine to upload files, or in the other direction to download them. You can move many files at a time in this manner.

  8. Watch for errors.

    Most of the time, everything works great, but sometimes there is a problem. The bottom panel shows potential error messages. If there is an error, you may need to reload a file.

  9. Make a bookmark.

    You’re likely to need this link again, so use the Add bookmark command on the Bookmarks menu to add a bookmark to this server. You may also want to add this host in the Site Manager to keep track of the site for future connections.