Let's Get Your Laptop Setup

What you’ll learn and how you can apply it

By the end of this section, you’ll be able to:

And you'll be able to:

Laptop Setup Time

Depending on what you have installed on your laptop, the setup may take up to three hours. This is largely because Xcode and Android Studio can take a while to download and install. Please budget time accordingly.

We recommend going for a walk or getting a coffee while some of the tools install on your laptop.

Mac vs Windows

The Progressive App framework does not work on Microsoft Windows. Because Astro is used to build iOS apps and you can only build iOS on Macs, we have standardized the framework to work on Mac OS X (sorry Windows developers). We rely heavily on the iOS simulator which is unfortunately not available on Windows computers. In addition, we rely on Bash for our build process which is not well supported on Windows yet.

Browser Version

Both Chrome and Safari are going to be required when developing Astro. We use Chrome for Android debugging and Safari for iOS debugging. We always try to support the latest version of either browser.

Code Editor (Atom, Sublime, etc)

Later we’ll talk about installing Xcode and Android Studio, but we do most of our coding in your text editor of choice. We really only use Xcode and Android Studio to build and run our code (unless you’re building a native plugin, in which case most of your development will occur in either Xcode or Android Studio). We recommend either installing Atom or Sublime (although any code editor will work just fine).

Install Node.js and npm

You most likely have Node.js and npm already installed on your computer, but to be sure, please run:

$ node -v

This should print out at least v6.0.0.* If not, your version is unsupported by Astro. You will need to install Node.js. To do this we strongly recommend that you use nvm to install it (as this allows you to easily switch between different versions of Node.js). To install, follow the directions here. At the time of this writing, its as simple as:

$ curl -o- | bash
$ nvm install v6
$ nvm alias default v6

If you run into problems, please see the end of this section for troubleshooting tips.

NOTE: We will always try and support the latest version of the tools that we use in Astro, however this might not always be the case, please check our supported versions to make sure you have the right version.

Install Grunt

Grunt is what we use to build our projects. It helps us automate processes and save you time by doing some heavy lifting behind the scenes when you build your app project.

If you don’t have Grunt installed, you’ll need to install Grunt's command line interface (CLI) globally.

NOTE: You may need to use sudo on your machine to install as an administrator. This is definitely not needed if you've installed Node.js via nvm.

$ npm install -g grunt-cli

This will put the grunt command in your PATH, allowing it to be run from any directory.

Install Xcode

Next, we’re going to install the latest version of Xcode from the Mac App Store. This may take a while. We recommend going for a walk or getting a coffee while it downloads and installs all the necessary tools.

NOTE: We will always try to support the latest version of Xcode and Android Studio, but sometimes we do not release a compatible version of Astro in time to work on the latest version. This usually happens around the time when Google or Apple release a new version of Android or iOS. If you’re uncertain, please check our supported versions page which is always up to date.

The iOS Simulator

The, included with Xcode, presents the iPhone & iPad user interface in a window on your Mac computer.

The iOS Simulator

Figure 1 - The iOS Simulator.

The Generator Script

You can run the generator script to create a new project. Follow the instructions on your screen. We'll also dive into the generator script in more detail in Chapter 2.1.

$ bash <(curl -s

Astro Generator example

Figure 2. The Generator Script.

Once you’ve completed the generator script it will configure your app. To see what you generated, open the project by running the code below:

$ cd simpleApp
$ open ios/simpleApp.xcworkspace

Then build and run the project. Once you’ve waited for your project to build, it will open in the simulator to the Welcome Screen shown below:

First run welcome screen

Figure 3. The Welcome Screen when your app loads for the first time.

Join the Astro Community Slack Team

We have a public Slack team that’s open for anyone to join. It’s where we ask each other questions and help each other when we get stuck.

Join the Slack team before continuing with the course.

Android Development

NOTE: For now, the core Developer-focused Progressive App lessons will place a lower emphasis on Android and most examples will be shown using iOS. This is deliberate because it helps focus the learning content on Astro and not on the differences between Android and iOS. Where there are big differences (like submitting to the various app stores) we will be sure to call it out in the training content.