How to Install Ionic in Ubuntu 20.04

An Ionic is a front-end framework for developing cross-platform apps with web technologies like Angular, Vue, and React. To run an Ionic in ubuntu, first, we need to install node. Follow these steps for Install Ionic in Ubuntu.

In this article, we will explore how to install Ionic in ubuntu and we need to remove sudo permission when creating and running the Ionic application.

install ionic in ubuntu

Step 1 Install node js

We will first install the node, to install node we need to add the PPA file of the node to our Ubuntu package archive. To add the PPA file we need a curl program

sudo apt install curl
curl -sL | sudo -E bash -
sudo apt install nodejs 
sudo apt-get install -y nodejs

For Windows and Mac operating system users, you can directly download nodejs from its official site.

Fixing npm permission

You may receive an access error when you try to install an Angular or Ionic package globally. This indicates that you do not have permission to write to the directories that npm uses to store global packages and commands. Without fixing npm permission, we need to use sudo all-time for the Ionic and Angular project. We need to configure the node to the local user so that we don’t have to use sudo command.

You can fix this problem using one of three options:
1. Change the permission to npm’s default directory.
2. Change npm’s default directory to another directory.
3. Install Node with a package manager that takes care of this for you.

Option 1: Change the permission to npm’s default directory

$npm config get prefix
By running the command above we will get the path of npm directory. If the display path is not /usr then we need to change the owner of npm’s directories to the name of the current user (your username!):  This changes the permissions of the sub-folders used by npm and some other tools (lib/node_modules, bin, and share).
WARNING: If the displayed path is just /usr, switch to Option 2 directly and no need to run code below or you will mess up your permissions.
$sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

Option 2: Change npm’s default directory to another directory
There are times when you do not want to change ownership of the default directory that npm uses (i.e. /usr) as this could cause some problems, for example, if you are sharing the system with other users. Instead, you can configure npm to use a different directory altogether. In our case, this will be a hidden directory in our home folder.

2.1 Make a directory for global installations:
  $mkdir ~/.npm-global

2.2 Configure npm to use the new directory path in command mode:
$npm config set prefix ‘~/.npm-global’

2.3 Open .profile hidden file
$sudo gedit .profile
The above command will open .profile hidden file in gedit editor and if the line exists then add the export word in front of PATH if the line does not exists then add the following line at end of .profile file and save the file.
export PATH=~/.npm-global/bin:$PATH

2.4 Back on the command line, update your system variables by running the command below:
$source ~/.profile

Install Ionic cli in Ubuntu

Now we can install Ionic in Ubuntu and we can run and install the npm package without the Sudo command.

npm install -g @ionic/cli

The ionic framework offers lots of free templates like tabs, conference, side-menu, list, and my-first-apps, we can choose from. With the release of ionic version 4, no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. Let’s create an ionic project from an existing free template from Ionic called a conference with sudo in command prompt.

ionic start demoApps

Once you have run the above command, you will ask to select the Ionic framework and template. We’ll choose an Angular framework and conference template from Ionic CLI.

We have explored how to install Ionic in the Ubuntu system and we have to fixed permission issues also.

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top