Cloud development environments help developers to finish their work and side projects from anywhere with an active internet connection.

Many cloud development environments provide a generous free tier, for example - gitpod. The free tiers enable anyone to set up cloud dev environments for use cases such as learning to code or creating full-stack hobby projects.

This article shows you how to install ionic react using gitpod and create a project.

Ionic is a cross-platform open-source framework that helps web developers create web and mobile applications with a single code base using Javascript and popular web frameworks like React, Angular, and Vue.

• First, create an empty repository in GitHub by clicking on the New button after signing in

• Now go to gitpod.io and sign up using your GitHub account

• After signing in, you will see the gitpod dashboard page, which gives you quick access to Workspaces, Projects, and Account Settings

• Click on Projects to create a new project

• The new project page gives you the option of selecting the GitHub repository you have created

• Once the repository is selected, the gitpod project creation is complete. The next step is to create a workspace by clicking on New Workspace

• After creating the new workspace, you will be able to see the gitpod workspace with vscode.

Installing Extensions

• The gitpod workspace allows users to install vscode extensions

The only limitation is that it does not feature all the extensions provided by vscode on the desktop.

Install Ionic via Terminal

• Gitpod workspace already comes pre-installed with node and npm. As a result, it becomes easier to install ionic using the following command -

$ npm install -g @ionic/CLI

Project Setup

• Once Ionic is installed, the next step is to run the following command called ionic start via the terminal. This command uses a pre-made template to set up your project

ionic start

• Choose React as the framework and hit the enter key

• Enter the project name, let's call it superapp, and hit enter key to choose tabs as the starter template

Ionic cli will now start building the template in the superapp folder.

• Now change the directory to superapp, and enter the following command in the terminal

ionic serve

The ionic serve command helps in previewing the app in the browser.

Gitpod prompts you to open the browser tab to preview the app.

You are now all set to build your app using the starter template ionic app.

It is always better to commit your changes back to the Github repository, and Gitpod makes that easy for you.