Software Management (Part 1) — Getting Started

Continuous Integration and Testing with GitLab CI, React Native and TypeScript

The things discussed in this tutorial

In this article/tutorial I’m going to explain how to set up the code part of software management. E.g. how to make sure your code works as expected and is in line with the rest of the code in your codebase. To achieve this we’re going to create a GitLab repository and set up a CI (Continuous Integration) pipeline to run the various checks on our code.

We’re going to use React Native in conjunction with TypeScript to achieve a typesafe mobile application. All the tutorials will be written for React Native but can be used in any TypeScript / JavaScript project with a little tweaking.

This tutorial consists of the following parts, each addressing a specific subject that follows up on the previous part:

Finished product: https://gitlab.com/TimoGlastra/softwaremanagementapp

Prerequisites

To follow the tutorials you need to have all the React Native dependencies installed. Because this tutorial is not about setting up a project but more about adding CI and other software management tools to it, I’m not going to fully explain how to do this. The official React Native docs do an excellent job explaining this.

Follow the ‘Installing Dependencies’ guide for ‘Building Projects with Native Code’ from this link for iOS (if you have a Mac) and Android. No need to create a project just yet.

  • This tutorial is based on React Native 0.57.4
  • React Native does not support the new Xcode build system yet, so be sure to also check out this issue when using Xcode 10

Creating a TypeScript project

Since 0.57 TypeScript is natively supported in React Native. This makes it a lot easier to get started with TypeScript in React Native. There are however still a couple of things that need to be done.

To also automate this I used a template for typescript. No need to install anything, you just run your init command with --template typescript and && node SoftwareManagementApp/setup.js and everything should work.

If you’re curious to see how this works under the hood, check out the React Native Template TypeScript Github repo.

Now to set up the project run:

react-native init SoftwareManagementApp --template typescript && node SoftwareManagementApp/setup.js

After downloading and doing a lot of things it should end with something like this: ✅ Setup completed!

To run your application simply execute the following command: react-native run-android or react-native run-ios

Working React Native application with TypeScript 🎉

Check out Software Management (Part 2) — Continuous Integration to get started with the real deal.