avatarJustin James

A web developer and speaker from Arizona

Ionic - How to setup on Windows

Posted In: ionic

Time to Read: 6 mins

If you are like me and just starting to work with the Ionic Framework and don’t already have a machine setup to do Android, iOS, Node, etc development then many of the guides out there leave out a number of steps that you need to do in order to get everything working.

It is really easy to get everything working though once you know the steps. Since I am a Windows user and love to automate work that is easily repeatable, I used Chocolatey and Boxstarter to automate the setup for the Ionic Framework.

On Windows, you will only be able to setup Android development. Apple requires a Mac in order to do iOS development.

Software to be installed

How to install software

  1. Install Chocolatey from http://www.chocolatey.org. Command is on the front-page of the site or below. Open an administrative command prompt to run the command. To open an administrative command prompt on Windows 8, go to the start menu, type cmd and then ctrl+shift+click on the cmd search result.

     Command Prompt: @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
  2. Install the BoxStarter Chocolatey package

     choco install -y BoxStarter
  3. Close the command prompt that you opened to install Chocolatey and BoxStarter
  4. On the desktop there should be a BoxStarter Shell icon, double-click on that to run it. If the icon is not on the desktop, then open up a command prompt and type BoxStarterShell.
  5. I have setup a gist file that has all of the Chocolatey commands to run to install the rest of the software and configure it. Run the gist file from the Boxstarter Shell:

     Install-BoxStarterPackage -PackageName  https://gist.githubusercontent.com/digitaldrummerj/3fe2eb057004b6742b89/raw/c042aecff396d9b26d4061f45544bff80ff321e8/IonicSetup  -DisableReboots

Post Install Steps

  1. Open a command prompt (it won’t work from a powershell command prompt)
  2. type Android
    • This will launch the Android SDK Manager.
    • Select the API 23 and check the SDK Platform
    • Scroll to the bottom and select the Google USB Driver
    • Click the install button. This can take a bit of time.
  3. Configure Genymotion Setup
    • After Genymotion is installed, open up the Genymotion UI and click on the Add Button.
    • Then click the Sign in button and follow the login instructions to login with the account that you create as part of the Genymotion download.
    • After you are logged in, select from the Android Version drop down 4.4.4
    • From the Device model drop down select a device type
    • Then select a device from the available list
    • Click the Next button.
    • Click the Next button and wait for the device to download
    • Click the Finish button.

Verify that everything works

  1. Open a command prompt
  2. Navigate the directory where you store you development projects (I use c:\projects)
  3. From c:\projects type: ionic start todo blank
  4. cd into c:\projects\todo (directory was created by the ionic start command)
  5. Run the command:

     ionic platform add android
  6. Run the command:

     ionic build android
  7. If running on a device or the Genymotion emulator run the command below. Note that if using the Genymotion emulator, make sure to start the Genymotion device before running the command below. In the Genymotion UI, you can start the device by selecting the device that you downloaded and clicking the start button.

     ionic run android

You are now ready to go create your ionic applications.

comments powered by Disqus