MPyK
MPyK
Jun 21, 2018 · 6 min read

Hello, Git lover! The recent news about Microsoft acquiring GitHub might come as a surprise to some of us. Due to this acquisition, some people even consider to switch to a different Git services.

Fortunately, at Monaca, we support both GitHub and GitSSH integration. We have just released the new look of Monaca Cloud IDE recently and it’s packed with awesome features. Read our previous blog to get a grasp of it. And for those who haven’t tried our awesome Monaca Cloud IDE yet, please give it a try. I’m sure you will love it.

Prior to the launching of the terminal feature, Git integration is also available within Monaca Cloud IDE with user-friendly interface but with limited operations. There are two ways to integrate your Monaca account with a Git service — Git SSH Integration and GitHub Integration. Thank to the terminal feature, we can now enjoy full support for Git commands and operations.

In this article, we will cover both Git SSH and GitHub integrations with the new Monaca Cloud IDE.

Launching Terminal

First and foremost, after you create a project in the new cloud IDE, let’s open the terminal by clicking on the plus icon and choose New Terminal.

Launch New Terminal

Here you can use most of the UNIX basic commands. For instance, if you type cat /etc/debian_version in the terminal console, the output would be 9.4 (at the time of writing). As you may also notice in the picture, /project is the default directory after you first open the terminal. This is the root directory of each project. Next, we will see how we can integrate Git services with Monaca.

Git SSH Integration

Step 1: Generating SSH Key

You can (re)generate your private and public key with ssh-keygen command. You can do it by running ssh-keygen -t rsa -C 'youremail@address.com' in the terminal console.

Your SSH Keys will be stored at /home/terminaluser/.ssh/ or ~/.ssh/ directory, if you accept the default.

Generate SSH Key

Don’t forget to replace youremail@address.com with your “real” email address. The output might be different in your environment.

Step 2: Adding the SSH Key to Git Service

The SSH key needs to be added to your Git service account for authentication. If you keep the default path, your public key would be available at ~/.ssh/id_rsa.pub . Copy and paste this key to the SSH key management page of your Git service account.

In this example, we will show how to add the key with GitLab. For other Git services, please refer to their documentation.

After login to your Gitlab account, navigate to User SettingsSSH Keys , paste in your public key, enter title then click Add key button.

Add SSH Key to Gitlab

Step 3: Connecting your project with the Git repository

  1. Open a project in Monaca Cloud IDE.
  2. From the top menu, go to ProjectVCS Configure. Then, choose Git option as shown below
Select Git SSH

3. Input your SSH Git repository URL and committer name.

Note: The repository must be empty and can not be changed after configured.

Config Git SSH Repository

4. Next, click on Initialize . Your project is then being uploaded to the new repository empty-repo.git in this example. By default, Monaca will create the first commit as Project's Initial Commit in your master branch. You may check it by issuing git log in your terminal console.

5. Phew… You’re almost there. There is only one step left which is to config remote repository from the terminal. It’s done via git remote command. Therefore, go ahead and add the remote origin by typing:

git remote add origin git@gitlab.com:UserName/empty-repo.git

Otherwise, if you already have a remote origin, you can overwrite it by typing:

git remote set-url origin git@gitlab.com:UserName/empty-repo.git

You can check whether you have registered the right remote repository by typing git remote -v .

Show Remote Repository

Now, you’re ready!

Try modifying the project and push your second commit!


GitHub Integration

This section is dedicated to those (including me) who are loyal to the Github regardless of the news. Come to think of it, it’s not that bad, right?

Step 1: Linking GitHub Account to Monaca

Navigate to Link to GitHub page and click on Link button. Then, follow the linking wizard. You may want to refer to this guideline.

Link to GitHub Account

Step 2: Connecting the project with your GitHub Account

  1. Open a project in Monaca Cloud IDE.
  2. From the top menu, go to ProjectVCS Configure. Then, choose GitHub option as shown below
Select GitHub

3. Select your GitHub repository and input committer name.

Note: The repository must be empty and can not be changed after configured.

Config GitHub Repository

Likewise, you then need to add remote repository. In this example, I will add remote repository with the https option.

git remote add origin https://github.com/UserName/another-empty-repo.git

Since you are using https option, so you will need to enter username and password when you push the code.

2-factor Authentication

In addition, if you turn on 2-factor authentication, you will need to generate personal token first as follows:

  1. Go to this link to generate your personal token.
  2. Click on Generate new token , input Description and authorizingScope , then click Generate Token .
Generate Personal Token

3. After clicking Generate Token button, GitHub will tell you the token . Make sure you copy it to somewhere safe.

Personal Token

Now, it’s ready!

Summary

Note that, you need to input your GitHub’s username and password (or personal token if you turn on 2-factor authentication) when you push the code.

Conclusion

As a result of terminal integration in Monaca Cloud IDE, we can do a lot now in the IDE. The ability to use all Git commands is just one of the awesome features we have been working on. Although this article does not touch on much detail of Git operations, please feel free to play around with it. Likewise, in order to make your application development even more efficient, try using the terminal functions by all means. If you have any questions or feedbacks, feel free to contact us anytime!

Thanks for reading!

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Thanks to Khemry Khourn

MPyK

Written by

MPyK

Just a simple programmer

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade