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:
- Verify you have the right versions of the development tools necessary to build an Astro app.
And you'll be able to:
Continue with subsequent chapters ready to hit the ground running - without wasting time downloading the right tool or having problems with your development tools. :)
Gain high-level familiarity with the tools that will be used to build the Astro framework.
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.
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 v6.9.4
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- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | 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.
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
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 Simulator.app, included with Xcode, presents the iPhone & iPad user interface in a window on your Mac computer.
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 https://raw.githubusercontent.com/mobify/generator-astro/master/generator.sh)
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:
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.
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.