Run Angular on CodeSandbox and StackBlitz

Learn via video courses

Overview

In real-world scenarios, it frequently occurs that we would like to share our code with someone in exchange for assistance. If we share a GitHub repository, they will need to set up the environment before they can assist us.

There are tools like Codesandbox and Stackblitz accessible that provide us with an immediate development environment and make it incredibly simple to operate and distribute projects through these platforms.

Introduction

CodeSandbox Angular and StackBlitz Angular are development environments which are available online. These platforms have many features which help the end-users a lot if they want to run their code remotely.

How to Create & Run an Angular Project in CodeSandbox?

  1. Go to the website: link create and run  Angular project in CodeSandbox

  2. Create an account, click on Sign In and sign in using any of your following social logins: create and run  Angular project in CodeSandbox 2

  3. Select CodeSandbox Angular template create and run  Angular project in CodeSandbox 3

create and run an Angular project in CodeSandbox 4

Add Angular Material

Go to the left sidebar and choose Add Dependency to add the Material dependencies.

Add the following dependencies:

Add Angular Material

Import Angular Material Modules

Create a folder shared under the app folder. In the shared folder, create a file named material.module.ts:

File: material.module.ts

Now let's import this module into our app.module.ts :

File: app.module.ts

Add Material Core Theme

Rename src/style.css to src/style.scss and update the angular-cli.json file

Update style. scss with the following theme

Adding Material Icon

Add a link element to the index.html file so that you can access the icon fonts CDN.

Create the Landing Page

Update your app.component.html

Under the src/assets folder, save the following picture as cover.jpg :

Creating the landing page

Creating Your First Template

Click on Sandbox Info from the CodeSandbox left menu, followed by Create Template.

You may now change the Template's name, description, colour, and icon.

When you create a new Sandbox in CodeSandbox angular, your template will be displayed.

Creating your first Template

By utilizing this template each time you develop a new application, you may now reduce the time it takes to integrate Material in Angular.

How to Create & Run Angular Project in StackBlitz?

  1. Go to the website:link create and run Angular project in StackBlitz

  2. Login using your GitHub account

  3. Create a new Angular project create and run Angular project in StackBlitz 2

Boom!!! It's done

create and run Angular project in StackBlitz 3

Yes, it is that easy, and with only three actions, we are prepared to begin.

Start your GitHub Project in Stackblitz

Our GitHub repository runs incredibly easily on StackBlitz Angular, thanks to StackBlitz.

  1. Copy the GitHub repo link https://github.com/srashtisj/angular-demo-app

  2. replace github.com to stackblitz.com/github

https://stackblitz.com/github/srashtisj/angular-demo-app

And done! Here's my GitHub repo on StackBlitz Angular: Start your GitHub project in stackblitz

We can run and do whatever changes are required and then push the changes back to the repo.

Run Our Unit Tests in Stackblitz

We can indeed use StackBlitz Angular to execute our unit tests. A few adjustments must be made before we can run unit tests.

Note ­čĺíStackBlitz Angular just runs the main.ts file

Therefore, all unit test bootstrapping codes must be included in the main.ts file to begin Jasmine testing for your project in a StackBlitz. So let's create a new main.ts file and rename our current main.ts to main.ts.backup.

The next step is to use Jasmin from main.ts to execute our unit tests:

  1. initialize and import the modules for Jasmine and Jasmine for browsers.
  2. importing the zone.js module
  3. Import the the.spec.ts files.
  4. Angular test environment for Bootstrap

Import the following code into the main.ts file

StackBlitz Example

Why Should I Run Angular Project Unit Tests in StackBlitz?

Occasionally we need to run unit tests for educational purposes or to make some playground links for use in technical publications. It's easier to use it.

Conclusion

  • CodeSandbox and StackBlitz are amazing tools for getting a development environment online
  • Creating a project on both platforms is super easy
  • Application Templates can be created on CodeSandbox to reuse in future
  • GitHub repository can be imported into stack blitz
  • Stackblitz angular also allows running unit tests on the platform