Your first Application: a Quick Start Guide

Last updated: June 13, 2025

Welcome to Codesphere! This guide will walk you through deploying your very first application using a pre-built template. We'll focus on understanding and using the CI (Continuous Integration) pipeline to get your app live in minutes.

Prerequisites:

  • A Codesphere account. If you don't have one, please sign up first. (See: How to create an account?)

  • A Codesphere workspace. If you don't have one, please create a workspace first (See: How to create a workspace?)

Step 1: Explore Your Workspace

Once your workspace is ready, you'll be taken into the Codesphere IDE. Take a moment to identify the key areas:

  • Left Sidebar: On the far left, you'll see a primary toolbar with icons for Files, Git, and Setup. These are your main navigation tools.

  • Main Panel: The large central area is a flexible, tabbed workspace. This is where different views will open as tabs. For example, when you click on a file, a code Editor tab opens here. When you navigate to Monitoring or CI from the Setup menu, those views will also open as new tabs in this main panel.

  • Bottom Panel: At the bottom of the screen is a panel that contains the Terminal and the CI Pipeline tabs. The CI Pipeline tab is where you will execute your deployment.

Step 2: Understand and run the CI Pipeline

The CI Pipeline is where you will manage the deployment of your application. Most Codesphere templates come with a pre-configured pipeline.

  1. Open the CI Configuration: In the left sidebar, click on the Setup icon. A menu will appear. From this menu, select CI. This will open the main CI Pipeline configuration view as a new tab in the central panel.

  2. Review Pipeline stages:

  • In this view, you can see the three stages of the pipeline:

    • Stage 1: Prepare: This stage handles tasks like installing dependencies.

    • Stage 2: Test: This stage is for running automated tests.

    • Stage 3: Run: This stage starts your application server.

  • You can click the dropdown arrow next to each stage to see the specific commands defined for it. To modify these steps, click the Edit button.

Step 3: Run the Pipeline and Deploy

Deploying your application happens in the CI Pipeline tab at the bottom of the IDE. You must execute each stage in sequence.

  1. Execute the "Prepare" stage: In the CI Pipeline tab, locate the Prepare stage and click its "Run" button. This is the essential first step that installs your project's dependencies.

  2. Execute the "Test" stage (Optional): Once "Prepare" is complete, locate the Test stage and click its "Run" button. If no tests are defined, this stage will complete instantly.

  3. Execute the "Run" stage: This is the final stage, which starts your application. After the previous stages are complete, click the "Run" button for the Run stage.

Throughout this process, you can watch the log output for each stage directly within the CI Pipeline tab. This log viewer shows the progress and any potential errors for each command. The Terminal tab next to it provides direct command-line access to the environment.

Step 4: Access Your Live Application

Once the "Run" stage is active and running successfully, your application is live.

  • In the top bar of the IDE, click the "Open deployment" button.

  • A new browser tab will open with the public URL of your application. You should now see it running!

Congratulations! You've successfully deployed your first application using the Codesphere CI Pipeline.

Next Steps

Now that you understand the basic workflow, consider exploring these topics:

  • Connecting your own Git repository to deploy existing projects.

  • Customizing the ci.yml file to tailor the pipeline to your needs.

  • Using Environment Variables to manage secrets and configuration.