Upload Files to a Project Using the Git Command Line

This 15-minute tutorial shows you how to create a project in Oracle Visual Builder Studio and upload an application’s files to the project’s Git repository using the Git command-line tool.

Background

Oracle Visual Builder Studio (VB Studio) is a DevOps and lifecycle management tool that provides the infrastructure for developing and deploying applications. You can use VB Studio’s source control capabilities to manage your application’s code, for example, when you’ve developed an application locally and want to start managing its files with source control. To do this, simply upload your application’s files to a VB Studio project, which (among other things) provides a Git repository for storing your source code.

To upload your application to VB Studio, you create a project with a Git repository. After creating the project, you clone the project’s Git repository to your computer, copy the application’s files to it, add and commit the files to the local Git repository, then push the commits to the project’s Git repository

What Do You Need?

Create a Project

  1. Sign in to VB Studio.

  2. On the Organization page, click + Create.

  3. On the New Project wizard’s Project Details page, enter these values, then click Next:

    • Name: Employee App
    • Description: A Java SE web application with Servlets, JSP, Bootstrap, and embedded Tomcat.

    Description of the illustration 1_1_projectwizard_projectdetails.png

  4. On the Template page, select Initial Repository and click Next.

    Description of the illustration 1_2_projectwizard_template.png

  5. On the Project Properties Initial Repository page, seelct:

    • Initial Repository: Initialize repository with README file
    • Wiki Markup: Markdown

    Description of the illustration 1_3_projectwizard_projectproperties.png

  6. Optionally, on the Team page, add members to the project.

    Description of the illustration 1_4_projectwizard_team.png

  7. Click Finish. Wait for the project’s provisioning to complete. After that’s done, the Project Home page opens.

    Description of the illustration 1_5_project_home.png

Clone the Project’s Git Repository

  1. On your computer, open the Git command line.

  2. Switch to the folder where you want to store the project. For example: $ cd MyApps

  3. In the left navigation bar, click Git Git icon to access your project’s Git repository.

  4. From the Clone drop-down list, click CopyCopy icon to copy the Git repo’s URL to copy the URL to your clipboard.

    Description of the illustration 2_1_vbstudio_git_urls.png

  5. On the Git command line, enter git clone and paste the URL you copied previously, for example:

    $ git clone https://mary.jane@environment.developer.test.com/vbcsinfraacct/employee-app_12345/scm/employee-app.git

  6. Click Enter.

    The cloning process starts. Enter your VB Studio password when prompted.

    Tip: If you run into an authentication error, especially if you’ve logged in using your organization’s SSO, try again using a personal access token instead of your password.

    You should see something like this:

    $ git clone https://mary.jane@environment.developer.test.com/vbcsinfraacct/employee-app_12345.git
Cloning into 'employee-app'...
remote: Counting objects: 3, done
remote: Finding sources: 100% (3/3)
remote: Getting sizes: 100% (2/2)
remote: Compressing objects: 100% (55/55)  
remote: Total 3 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (3/3), done.

  7. Open the cloned repository’s directory. You’ll notice a README.md file and a .git directory created there. Don’t delete or rename the .git directory, as it contains necessary Git repository files. Here’s an example of the employee-app project’s Git repo cloned under the MyApps directory:

    Description of the illustration 2_2_cloned_repo.png

Add the Sample Application Files to the Cloned Git Repository

  1. Extract the sample application files from the .zip file to the cloned repository’s directory, for example:

    Description of the illustration 3_1_cloned_repo_with_files.png

  2. Open the README.md file in a text editor.

  3. Copy this text, paste it in the README.md file, and save the file:

    # Employee Sample Application
The Employee Sample Application is a simple Java web app that implements CRUD operations using Bootstrap to add UI styles, Tomcat as the embedded server, and Maven to compile and package the dependencies needed to run the web app.

Application files:
* `src` directory: contains source files
* pom.xml: defines dependencies required to run Tomcat in embedded mode, and plug-ins to compile and package the application in a single uber JAR
* manifest.json: provides metadata of the Java application, including the Java version and the command to run the application

  4. On the Git command line, change to the cloned repository directory, for example:

    $ cd /c/MyApps/employee-app

    You’ll need to do this because after the project Git repository is cloned, you aren’t automatically navigated to the directory. After you change to the cloned repository directory, notice the (main) after the path, indicating the default Git repository branch. For example, /c/MyApps/employee-app (main).

  5. To tell Git to include all your changes in the next commit, stage your files using the git add command:

    $ git add .

  6. Enter the git status command to confirm that all files were staged.

    $ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
(use "git reset HEAD <file>..." to unstage)

modified:   README.md
new file:   manifest.json
new file:   pom.xml
new file:   src/assembly/distribution.xml
new file:   src/main/java/com/example/employees/Employee.java
new file:   src/main/java/com/example/employees/EmployeeList.java
new file:   src/main/java/com/example/employees/EmployeeService.java
new file:   src/main/java/com/example/employees/EmployeeServlet.java
new file:   src/main/java/com/example/employees/Main.java
new file:   src/main/webapp/META-INF/context.xml
new file:   src/main/webapp/WEB-INF/web.xml
new file:   src/main/webapp/css/bootstrap.min.css
new file:   src/main/webapp/fonts/glyphicons-halflings-regular.eot
new file:   src/main/webapp/fonts/glyphicons-halflings-regular.svg
new file:   src/main/webapp/fonts/glyphicons-halflings-regular.ttf
new file:   src/main/webapp/fonts/glyphicons-halflings-regular.woff
new file:   src/main/webapp/fonts/glyphicons-halflings-regular.woff2
new file:   src/main/webapp/index.jsp
new file:   src/main/webapp/js/bootstrap.min.js
new file:   src/main/webapp/jsp/list-employees.jsp
new file:   src/main/webapp/jsp/new-employee.jsp

Commit and Push the Sample Application Files to the Project’s Git Repository

  1. On the Git command line, enter the git commit -m "Initial commit" command to commit the staged files to the local Git repository, with Initial commit as the commit message.

    $ git commit -m "Initial commit"
[main c869517] Initial commit
21 files changed, 964 insertions(+), 2 deletions(-)
rewrite README.md (94%)
create mode 100644 manifest.json
create mode 100644 pom.xml
create mode 100644 src/assembly/distribution.xml
create mode 100644 src/main/java/com/example/employees/Employee.java
create mode 100644 src/main/java/com/example/employees/EmployeeList.java
create mode 100644 src/main/java/com/example/employees/EmployeeService.java
create mode 100644 src/main/java/com/example/employees/EmployeeServlet.java
create mode 100644 src/main/java/com/example/employees/Main.java
create mode 100644 src/main/webapp/META-INF/context.xml
create mode 100644 src/main/webapp/WEB-INF/web.xml
create mode 100644 src/main/webapp/css/bootstrap.min.css
create mode 100644 src/main/webapp/fonts/glyphicons-halflings-regular.eot
create mode 100644 src/main/webapp/fonts/glyphicons-halflings-regular.svg
create mode 100644 src/main/webapp/fonts/glyphicons-halflings-regular.ttf
create mode 100644 src/main/webapp/fonts/glyphicons-halflings-regular.woff
create mode 100644 src/main/webapp/fonts/glyphicons-halflings-regular.woff2
create mode 100644 src/main/webapp/index.jsp
create mode 100644 src/main/webapp/js/bootstrap.min.js
create mode 100644 src/main/webapp/jsp/list-employees.jsp
create mode 100644 src/main/webapp/jsp/new-employee.jsp

  2. Enter the git command push -u origin to push the commits of the main branch in the local repo to the remote repo, where “origin” is the default name assigned to the remote project. Make sure you enter your VB Studio password when prompted.

    $ git push -u origin main
Enumerating objects: 39, done.
Counting objects: 100% (39/39), done.
Delta compression using up to 8 threads
Compressing objects: 100% (29/29), done.
Writing objects: 100% (37/37), 145.49 KiB | 4.41 MiB/s, done.
Total 37 (delta 0), reused 0 (delta 0)
remote: [Push Options] Do you want to create a merge request? Use git push -o mr.target=<target-branch> origin <feature-branch>
remote: Updating references: 100% (1/1)
To https://environment.developer.test.com/vbcsinfraacct/employee-app_12345.git
f06779c..c869517  main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

  3. Return to the VB Studio browser tab.

  4. In the navigation bar, click GitGit icon and verify that all files are added to the repository.

    Description of the illustration 4_1_vbstudio_gitpage_files.png

That’s it! You’ve successfully uploaded the sample application’s files from your computer to the VB Studio project’s Git repository.

For more information, see the Visual Builder Studio Help Center

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.