How to install ionic in ubuntu and fixing npm permission in ionic

An Ionic is a front-end framework for developing cross-platform apps with web technologies like Angular, Vue, React, and PWA. To run an Ionic in ubuntu, first, we need to install node js. Follow these steps for installing 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 or ionic install ubuntu — Install Ionic in Ubuntu

Step for Install Ionic in Ubuntu 20.04

To install Ionic in ubuntu, we have followed certain steps, as we need npm which is in turn dependent on node js, and need to fix npm permission, and the last install Ionic.

Step 1: Install Node js

We will first install the node, to install the 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 https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs 
OR
sudo apt-get install -y nodejs

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

Step 2: Fixing npm permission for Ionic

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 projects. We need to configure the node to the local user so that we don’t have to use the Sudo command.

You can fix this problem using one of three options:

Change the permission to npm’s default directory.
Change npm’s default directory to another directory.
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 the 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 the 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 the .profile hidden file in the gedit editor and if the line exists then add the export word in front of PATH if the line does not exist then add the following line at end of the .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

Step 3: 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, which 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.

Conclusion
We have explored how to install Ionic in the Ubuntu system and we have to fix permission issues also. Ubuntu is a free operating system, try to upgrade to the latest version of Ubuntu.

Related posts

How to Install Ionic in Ubuntu 20.04