how to … use a chromebook for testing your website locally (html, css, javascript files)

My chromebook is quick and easy to use for all things web – normally.

But try to do something like creating a website with several separate files (for example 3 separate files : index.html, style.css, javscript.js), with references to each other, and then test your website in your browser from your local drive.

You will quickly find out that this is not as easily done as on your desktop or laptop. For basic functionality, one way to do it on your desktop or laptop would be to put all files into the same local drive, for example, and then open index.html in your browser. This does not work on your local chromebook drive (the Downloads folder). Neither does it currently work in Google Drive.

[ Editing your files is comfortable though, I like to use Caret as a text editor that also works offline, and there are many excellent others including many great cloud IDEs. See this, this and this article (all external). ]

I would like to show one way to work around that issue so that you can actually test your website locally and offline. There may be other ways, but I found that this approach works for me, and it is worth the time if your working on some files for a bit of a time and want to see the results right away.

The basic steps involved are:

  1. Create a new folder in your Downloads folder (files app) FilesApp   Screenshot 2015-11-03 at 1.59.49 PM
  2. Now you need to follow the steps to create a chrome app as described here (external / see chrome developer website – all of the following is described there with the goal of making a chrome app).That means, in your new folder create a file called manifesto.json:
{
 "manifest_version": 2,
 "name": "your website's name",
 "version": "1",
 "icons": {
    "128": "your_icon_name.png"
 },
 "permissions": ["fullscreen"],
 "app": {
    "background": {
       "scripts": ["background.js"]
    }
 },
 "minimum_chrome_version": "28"
}

3. In your new folder create a file called background.js:

chrome.app.runtime.onLaunched.addListener(function() {
 chrome.app.window.create('index.html', {
 id: 'main',
 state: 'fullscreen',
 });
});

4. In your new folder create an empty index.html file and put your html in there.

5. Add your icons to the folder (the ones you included in your manifesto.json.

6. In your chrome browser type in chrome://flags and click “Experimental Extension APIs” (you can search for it).

7. Finally, and this is important, enable your app. For this you need to go to the extensions tab in your chrome browser and enable “developer mode” (checkbox)

Screenshot 2015-11-12 at 5.04.12 PM

8. Finally, in the extensions tab click on the button “Load unpacked extension…” and choose the folder you place all your files in (index.html, manifesto.json, background.js, your_icon_name.png, and any other files that you have).

This will get you started. If you want to use jquery.js, for example, you can also do that. Be sure to put the jquery file in your local folder, too (or in a subdirectory of your local folder). This way, you could also parse an xml file that is in your local folder.

One of the things I like about this solution is that you can (re)start your app with just one click on the icon, like all other apps. And it is really fast once you have set it up.

As you dig deeper into the possibilities you will find that some things work differently from your normal web development (e. g. you need to put your javascript in a separate file, references to external urls for images, for example, and more things). There is a really good description on how to deal with some of the differences (e. g. external urls, local storage etc.) on the chrome developer website (external).

One thought on “how to … use a chromebook for testing your website locally (html, css, javascript files)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s