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.
- 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.
- 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
- 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
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
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.