Setting Up Ionic 4 on Windows 10
Official Post: https://ionictheme.com/setting-up-ionic4-on-windows10/
Hi everybody, we are starting our first post on 2019 bringing some tips about Ionic 4 + Windows 10.
A very interesting fact is that most Ionic developers (or at least our customers) are Windows users (more than 70%), which means that many issues can happen both to configure and also to run and build.
So let's take a look at some tips on configuring and developing Ionic 4 with Windows 10.
Windows initial config
At first time, do you need to choose wich path you will to follow to config;
Installing all the dependencies
NOTE: We recommend to use PowerShell instead Prompt Command for command line and pay attention about Node version, you should to install Node 10+ for Ionic 4 + Angular 7.
1 - Node/NPM:
Install directly by download link from their website. or by Chocolatey package manager.
Once installed, you should have access to both node
and npm from your command line.
2 - Java JDK:
We’ll need to download and install the Java JDK from their website.
3 - Android SDK:
Download Android Studio and go through the installer and set up the IDE. It should print out a location for where the Android SDK gets installed. Copy this down for future use.
If you don’t want to download Android Studio you can just download the Android SDK files for Windows here.
4 - Install SDK Platforms
After installing the Android SDK, you must also install the packages for whatever API level you wish to target. To do it, open the Android Studio, and click on Configure -> SDK Manager.
Or run tools/android by terminal to open the Android SDK Manager. We’ll want to install:
- Android Platform SDK for your targeted version of Android
- Android Platform-Tools
- Android SDK build-tools version 19.1.0 or higher
- Android Support Repository (found under “Extras”)
Accept the license and let the packages install.
5 - Gradle:
If you install the Android SDK without Android Studio you have to install Gradle seperatly. Download Gradle from the offical Gradle website.
6 - Environment Variables:
Now that everything’s installed, we’ll need to set some environment variables for our command line. From the startmenu, search for “System Environment Variables”. From here, we’ll update the user variable PATH and create a new variable of ANDROID_HOME
ANDROID_HOME: The path to where the Android SDK is installed.PATH: Two entries, one where Tools are installed for the Android SDK, and another for Platform toolsGRADLE_HOME: The path to where gradle is installed
Or set them with the Windows Command Line
set ANDROID_HOME=C:\<installation location>\sdk
set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
set GRADLE_HOME=C:\<installation location>
From here, we should be able to run
# check Java version
java -version
# start the Android SDK manager
android
Now, you should be able to create and build an Android project from the command line.
7 - Git
Extremely needed! it allows development teams to contribute code to the same project without causing code conflicts, also needed to Ionic Appflow git repositories.
https://git-scm.com/download/win
Installing Ionic and his dependencies
NOTE: For global package installs
-g, it's recommended to open the PowerShell as Admin
Sass
To install Sass open your PowerShell and execute the following command:
C:\npm install -g sass
For more information visit Sass site.
Typescript
Ionic and Angular needs a Typescript, ionic is built with TypeScript, using it to build an Ionic app is completely optional.
C:\npm install -g typescript
Ionic CLI
Install the Ionic CLI globally with npm:
C:\npm install -g ionic
From now on! you are ready to start your Ionic App, if everything were well at this moment, good job!
Follow below some official links by Ionic Docs to you know more about and begin your projects.
- https://beta.ionicframework.com/docs/installation/cli
- https://beta.ionicframework.com/docs/installation/cdn
- https://beta.ionicframework.com/docs/installation/android
- https://beta.ionicframework.com/docs/building/starting
- https://beta.ionicframework.com/docs/building/scaffolding
Credits and inspiration