We're almost at the end of this tutorial, and I want to leave you on a good note so we're concluding with a nice and short chapter! Converting your prototype into a shareable format is actually only a matter of typing one command in your prototype's folder:
npm run buildSo, instead of typing start like we would when testing our prototype, we simply type run build and it will prepare all the code for us — it takes a little while but once you see a bunch of lines in your console it's done. You will still need to have a server in order to run it, but now this can be your run-of-the-mill web hosting service rather than the specialized Node.js setup.
The files we'll need are going to be in the public folder of your project. Everything in that folder is required, which mainly consists of our index.html file, one big Javascript code file (it contains all of our code, and also Coffeescript modules converted into Javascript) and your images and such. Remember that if you put any sensitive code there, such as passwords, they will also be publicly available the moment you start sharing your project!
Uploading online
If you have a hosting package set up somewhere, for example for your portfolio pages, you can easily put everything online simply by uploading the contents of your prototype's public folder.
If you don't have a hosting package yet, it used to be possible to use file storage services such as Google Drive or Dropbox to host simple websites, but they both unfortunately discontinued these services. However, there are still two free options available that I could find:
- Github offers a hosting option. However, you need to use git to upload your files so this is mostly useful if you have experience with the platform;
- Neocities offers free hosting with a drag-and-drop interface for uploading files. If you're an aging internet hippy like me you might remember gold old Geocities pages — these are the spiritual successor.
To show you how easy it can be, I registered for a Neocities account. Once you are fully signed up and logged in, you can click on the link in the top right and choose the menu option "Edit Site":
This shows you an overview of all the files that are currently on your website, by default there is a placeholder. Now, simply drag your files from the public folder of your project into this screen:
And after some uploading, your website should be available at a public address, depending on your account name. I went ahead and snagged "prototyping" already, so I'm at http://prototyping.neocities.org!
Creating an application
Because you now have a package that runs by itself, we can also turn it into an app or a desktop application. However, for now I'm leaving this out of the scope of this tutorial since I think the prototype in its current state also works pretty well if you simply add the icon to the home screen, or open it in a fullscreen browser.
If you do want to further explore this option: for mobile apps, check out Cordova, and for desktop applications have a look at Electron.
All kinds of other fancy features, such as being able to use it and store data while not having an internet connection, will be possible with these platforms. So if your target audience is not always online, this is worth exploring. A nice extra (but untested so far by me) is that Firebase also supports temporary offline storage, and will then automatically synchronize the data the moment you have an internet connection again. Cordova might also offer better integration with the mobile device's sensors, so if you're interested in that do give it a try (and let me know how it goes)!
Fin
This concludes our tutorial, at least for now. I hope you had a blast, I know I did while writing this stuff and taking endless screenshots! Let me know what you think, and what you would like to see added in the future: other prototyping domains, technologies — you name it.