Creating an Angular Template for Codesphere

Learn how to get the popular Angular framework running on Codesphere and build a PDF merging tool with us.

October 19, 2023 3 Min Read
Creating an Angular Template for Codesphere
Creating an Angular Template for Codesphere

Jan-David Wiederstein

Karlsruhe

Table of Contents

The Angular framework, developed by Google, has emerged as a top choice for frontend development in the web development world. Major companies like Netflix trust it for building robust web services.

In this blog post, I'll show you how I set up Angular on Codesphere Workspaces, a cloud-based development platform.

I'm studying Data Science and mainly use Python for programming. However, I faced a new challenge with Angular, a JavaScript-based framework. Additionally, I had limited experience with HTML and CSS. To work effectively with Angular, I needed to grasp the fundamentals of JavaScript, CSS, and HTML.

To overcome these challenges, I needed a manageable project idea. I made a PDF Merge Tool that let users upload PDF files, arrange them in any order, and combine them into one PDF document.

To start my project, I turned to YouTube tutorials and utilized ChatGPT for guidance. However, I encountered some roadblocks, particularly when dealing with errors in the terminal. In such instances, reaching out to my colleagues proved invaluable. Their insights and solutions to issues were instrumental in getting my project off the ground.

While the resulting template may appear basic, it represents a significant milestone in my software development journey. Throughout this project, I gained proficiency in several key areas, including HTML, CSS, JavaScript, Git, Angular, running Angular on a Node.js server, Bash scripting, and leveraging resources like Stack Overflow and ChatGPT to resolve specific issues.

It is quite simple to use this PDF Merge-Tool in one of your own workspaces in Codesphere. Just go to your Team and click on the "new workspace" button:

Codesphere Team

Then you can select the `Angular: PDF Merge Tool` in the Templates menu:

Codesphere Create Workspace menu

Now you can choose the free plan and click on `Start Coding`:

Codesphere select Plan

Once you provision the workspace, you can go to the CI-Pipeline interface and run the `Prepare` Stage.

Codesphere CI-Pipeline

The `Prepare` stage installs all necessary dependencies. Lastly we run the `Run` stage of the CI-Pipeline:

Codesphere CI-Pipeline

We have finished and deployed the PDF-Merge Tool now! you can either click on the `open the deployment` button in the top right corner or you can go back to team and click on the workspace URL.

open your deployment

workspace URL

Now we have deployed the PDF Merge Tool and you can use it.

PDF Merge Tool

I learned a lot from making this basic website, and I'm excited to improve these skills in future projects. My goal is to contribute more templates to the Codesphere Community, covering various frameworks and technologies, each with a higher level of quality.

If you'd like to connect with me, I invite you to join the Codesphere Community Server on Discord!

About the Author

Creating an Angular Template for Codesphere

Jan-David Wiederstein

Karlsruhe

Data Science B.Sc. student and working student at Codesphere

More Posts

You Build It You Run It: DevOps on Steroids

You Build It You Run It: DevOps on Steroids

"You build it, you run it" breaks down long-standing barriers, placing deployment, monitoring, and maintenance directly in the hands of developers. Let's see how it stacks up in practice.

How to Deploy Gleam on Codesphere?

How to Deploy Gleam on Codesphere?

Gleam is a newly released functional programming language. Follow this tutorial to build a simple web app with Gleam and deploy it on Codesphere.

Good Coding Practices: Codesphere Version

Good Coding Practices: Codesphere Version

Adhering to good coding practices and maintaining a consistent codebase is the differentiating factor when it comes to developer experience and efficiency.