Make Your First App for Firefox OS in 3 Easy Steps

Almost all of you are familiar with Firefox web browser which is developed by Mozilla Foundation. Personally Firefox in my favorite browser perhaps your also as it is open source and gives total safety to our privacy. Mozilla has added a new revolutionary part in their contribution bag which is named Firefox OS. It’s an open source operating system designed for smart phones and tablets. In this article you are going to learn how to make basic Firefox app in 3 step by step process.

Make Your First App for Firefox OS in 3 Easy StepsMake Your First App for Firefox OS in 3 Easy Steps

Before starting the app development let me tell you about the skills and tools that are necessary to develop apps for Firefox OS. Basically Firefox apps are web based which need only web programming languages to start app development.

1. HTML – HTML represents Hyper Text Markup language which is well known as backbone of web programming. This language is mandatory part of Firefox app. You can learn HTML easily from online tutorials.

2. CSS – CSS is the abbreviation of Cascading Style Sheet which is essential for making your app more attractive and stylish. You can use CSS along with HTML for better user experience.

3. Java Script – Java Script is the final language for making higher level apps. This is not mandatory in case of making normal apps. Basically Java Script is used for developing games and logical apps.

4. Manifest file – This file is known as the heart of Firefox app. This file converts your html file into an app. You can know more about manifest file from Mozilla App Center.

5. Firefox simulator – It’s a virtual Firefox OS operated phone for your computer. This simulator will help you to run and play your apps via computer without having any Firefox OS smart phone. Simulator of Firefox is quite different from other simulators as it comes as a plugin with Firefox browser. Therefore you need to use Firefox browser to test your Firefox OS apps.

That was the primary introduction of skills and tools for making Firefox OS apps. Now let’s start making your first app in step by step process.

Step 1: In first step you need to make a HTML file which will be your main app body. Copy the below code if you are not skilled in HTML language. Otherwise write your own code using any HTML compiler like notepad, notepad++, sublime text 2 etc.

<html>
<head>
<title>My first App for Firefox OS</title>
</head>
<body>
Hello World! I am a Firefox app maker.
</body>
</html>

After coping or compiling the code save it in a new folder with index.html name. You can use any name instead of index but the extension must be html. It’s a simple HTML page code for this demo app. You can enhance your coding skill to a higher level by learning web programming from best online tutorials provider.

Step2: This step is quite easier but more important. In second step you need to make a manifest file. Just copy below code in any of above mentioned compiler and save it in the same folder named manifest.webapp. Remember the extension must be webapp.

{
"name": "My App",
"description": "My elevator pitch goes here",
"launch_path": "/index.html",
"icons": {
"128": "/img/icon-128.png"
},
"developer": {
"name": "Your name or organization",
"url": "http://your-homepage-here.org"
},
"default_locale": "en"
}

This file will also describe your app to others. You can set name and description of your app in this file. Launch path shows the name of html file. You can also add an icon by setting icon path and size here. Get your credit by giving your name and website link (if you have) in developer section.

Step3: Congrats! You have successfully made your first Firefox app. I am not joking…… You did it. Now it’s time to run your app using Firefox OS simulator. Get ready to see your own made app. First open your Firefox browser. Perhaps you have already done it, if your are reading this article using Firefox browser. Then go to Developer from your Browser Menu. Now click on App Manager. This is your app testing environment. Look down on this page and click on Start Simulator button. Right after that you need to press Install Simulator button which will redirect you to a new page where you have to click  Install Simulator. Now choose you simulator version from the list. I recommend you to install verson 1.3 as it’s stable. You may face unexpected errors in non-stable versions. Along with the simulator you must install ADB Helper . Your apps will not run without this plugin.

Make Your First App for Firefox OS in 3 Easy Steps picAfter successfully installation of your simulator run it to check by clicking on Start Simulator>Firefox OS 1.3 or Firefox OS 2.0 depending on which version you have installed. Now add your app by clicking Add Packaged App from the App Manager window. Select the folder where you have saved you html and manifest file. At last click on update, run your app and be proud to be a Firefox app maker.

For any query feel free to make comment. If you like to contribute for Mozilla Firefox OS then share with friends and make them contributor too.

2 Comments

  1. Vjay June 30, 2014
  2. Moumita Dasgupta June 30, 2014

Leave a Reply