Skip to content Skip to sidebar Skip to footer

How to Install Ionic Framework on Windows (Complete+Pictures)

Here’s how to easily install the Ionic Framework on Windows, complete for the first time installing the Ionic Framework

For those of you who are mobile application developers, then you are familiar with the Ionic Framework, right? Ionic is a framework that we can use to build a hybrid mobile application with the help of CSS, HTML 5 and Angular JS.

The engines used by the Ionic Framework are NodeJS SASS and AngularJS. Ionic is also equipped with various CSS components, for example, such as grids, lists, forms, buttons, tabs and so on.

Therefore, Ionis is a web technology that we can use to build a mobile application. Because the technology is a hybrid, we can create the application at once, but we can release it on more than one platform, which is often called cross platform.

How to Install Ionic Framework on Windows

The advantages of this Ionic framework are that it can shorten our time in developing applications. That’s because Ionic is a hybrid, where we only need to make it once and the application can be built on various devices at once.

Ionic is also a framework that we can get for free and very free for us to use for commercial or personal purposes.

One thing you have to remember is that Ionic is a framework only. If you want to make it into an iOS or Android application, you still have to use phonegap or android studio. If you want to install the Ionic framework, then you must meet several conditions first, namely you must first install the tools below:

  1. Js nodes
  2. JDK
  3. Apache Ant
  4. Android SDK

If you do not install some of the tools above, there will be an error when coding. If so, then you can follow the method below to install the Ionic framework on Windows.

1. If you have installed some of these tools, you must open the Command Prompt application as an Administrator. Here we have to check whether the node js has been entered into the environment path or not. Type command node -v. Then click Enter, if the display appears as shown in the image below, then it is a sign that our js node has been entered into the environment path.

ionic framework

2. If it does not appear as in the previous image, it means that your node js has not been entered into the environment path. To enter it into the environment path, open the Control Panel. Then click menu User Accounts.

how to install ionic framework on windows

3. Then click menu User Accounts again.

ionic framework

4. Then click menu Change my environment variables.

ionic framework

5. Then the Environment Variables window will appear. Click on variables Path and click menu Edit.

how to install ionic framework on windows 10

6. Now, enter the directory address npm that is on your computer. Then click Ok.

ionic framework

7. Then also enter the environment path for the JDK or Java. Create a new variable named JAVA_HOME and enter the JDK directory address in the Variable value section. Then click OK. Then enter the folder directory address son Java in section Path.

how to install ionic framework on latest windows

8. Do the same thing for apache-ant by adding the path to the bin file directory in the path variable. And for the android SDK, you must add a new variable with the name ANDROID_HOME and in the variable value, enter the android SDK file directory address.

ionic framework

9. Now, type the command npm -v and click Enter. Then a screen like the one in the image below will appear.

ionic framework

10. Now you can install cordova first. Type command npm install -g cordova. Then click Enter. Wait a few moments until the entire package is successfully downloaded.

ionic framework

11. Check Cordova by typing the command cordova -v. If it looks like in the picture, that’s a sign that cordova has been successfully installed.

ionic framework

12. Then install Ionic by typing the command npm install -g ionic. Wait a few moments until the process is complete.

ionic framework

13. Then type the ionic command to see if the installation process went smoothly. If the display appears as shown in the image below. That means the ionic framework is installed perfectly.

ionic framework

That’s the article that explains how to install the Ionic framework on Windows. Hopefully this article can be useful for you.

Post a Comment for "How to Install Ionic Framework on Windows (Complete+Pictures)"