Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jprivet-dev/angular-stackblitz-webcontainer

Sandbox to locally generate a project with Angular CLI and launch it online in a WebContainer on StackBlitz.
https://github.com/jprivet-dev/angular-stackblitz-webcontainer

angular stackbit webcontainer

Last synced: about 2 months ago
JSON representation

Sandbox to locally generate a project with Angular CLI and launch it online in a WebContainer on StackBlitz.

Awesome Lists containing this project

README 

        
# Angular, StackBlitz & WebContainer



[![Project release](https://flat.badgen.net/badge/release/v1602.0.0/blue)](https://github.com/jprivet-dev/angular-stackblitz-webcontainer/releases/tag/v1602.0.0)

[![Angular release](https://flat.badgen.net/badge/angular/16.2.4/d93630)](https://github.com/angular/angular/releases/tag/16.2.4)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/edit/jprivet-dev-angular-stackblitz-webcontainer)



## Presentation



Sandbox to locally generate a project with Angular CLI and launch it online in a WebContainer on StackBlitz.



## Prerequisites



Be sure to install the latest version of:



- [NVM](https://github.com/nvm-sh/nvm) or [Node]( https://nodejs.org/en/download).

- Global [Angular CLI](https://angular.io/cli) (if you want to regenerate the application).



## Installation



### The very first cloning of the project



1 - Clone the project:



```shell

git clone [email protected]:jprivet-dev/angular-stackblitz-webcontainer.git

```



2 - Go in the folder project:



```shell

cd angular-stackblitz-webcontainer

```



3 - Install the dependencies:



```shell

npm install

```



4 - Launch the project:



```shell

ng serve

```



5 - Go on http://localhost:4200/.



![welcome.png](docs%2Fwelcome.png)



### All in one command



```shell

git clone [email protected]:jprivet-dev/angular-stackblitz-webcontainer.git;\

cd angular-stackblitz-webcontainer;\

npm install;\

ng serve

```



### The following times



1 - Launch the project:



```shell

ng serve

```



2 - Go on http://localhost:4200/



3 - Stop the project with `Ctrl + C`



## Regenerate a new Angular app



Launch the script:



```shell

. scripts/generate-root.sh

```



And commit all:



```shell

git add .; git commit -m "build(ng): regenerate a new angular app"

```



## StackBlitz



### Open the project in a WebContainer



Go on https://stackblitz.com/edit/jprivet-dev-angular-stackblitz-webcontainer.



### Create your own WebContainer API



1 - On StackBlitz, [create a new WebContainer API with Node.js](https://stackblitz.com/fork/github/stackblitz/webcontainer-api-starter).



2 - Click on the button **Connect repository**:



![stackblitz-connect-repository.png](docs%2Fstackblitz-connect-repository.png)



3 - In the popup **Connect new GitHub repository**, click on **import an existing repository**:



![stackblitz-import-existing-repository.png](docs%2Fstackblitz-import-existing-repository.png)



4 - In the popup **Import existing GitHub repository**, copy/Past in the field **Paste GitHub repository URL** the following URL:



```

https://github.com/jprivet-dev/angular-stackblitz-webcontainer

```



![stackblitz-past-github-repository.png](docs%2Fstackblitz-past-github-repository.png)



5 - Click on the button **Import repository** to validate.



6 - In the top menu, click on the button **Save**.



7 - Refresh the complete page to reboot the WebContainer:



![stackblitz-reboot.png](docs%2Fstackblitz-reboot.png)



8 - If all went well, you can see the `✔ Compiled successfully.` message in the terminal and the application displayed.



### Launching the project from GitHub



> /!\ Do not launch the project on StackBlitz directly from GitHub.



If you [launch the project in StackBlitz](https://stackblitz.com/github/jprivet-dev/angular-stackblitz-webcontainer/) directly from GitHub (without WebContainer), you will have the following error in the console: 



```

Error: NG0908: In this configuration Angular requires Zone.js

```



Angular CLI locally generates by default the `main.ts` file without `zone.js`:



```typescript

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';



import { AppModule } from './app/app.module';



platformBrowserDynamic().bootstrapModule(AppModule)

  .catch(err => console.error(err));

```

... and put `zone.js` in the `polyfills` parameters of the `angular.json` file:



```json

"polyfills" : [

    "zone.js"

],

```



In our case, it seems that the `polyfills` properties, in the `angular.json` file generated by Angular CLI, are not taken into account on **StackBlitz** and return an error.



However, [StackBlitz's Angular starter](https://github.com/stackblitz/starters/tree/main/angular) provides a `main.ts` file that imports `zone.js`, with which it works very well without WebContainer:



```typescript

// main.ts

import 'zone.js/dist/zone';

import { Component } from '@angular/core';

import { CommonModule } from '@angular/common';

import { bootstrapApplication } from '@angular/platform-browser';



...

```



> I created [an issue on StackBlitz](https://github.com/stackblitz/core/issues/2366). To get around this problem, I'm going to use the WebContainer.



## Semantic Versioning



```

v[ANGULAR MAJOR + ANGULAR MINOR].[MINOR].[PATCH]

```



Example, with Angular `15.1.6`:



```

v1501.0.0

```



## Resources



- https://angular.io/

- https://badgen.net/

- StackBlitz:

  - https://stackblitz.com/

  - Launching projects from GitHub: https://developer.stackblitz.com/guides/integration/open-from-github

  - https://github.com/stackblitz/starters/tree/main/angular

  - https://github.com/stackblitz/webcontainer-api-starter

  - Use StackBlitz WebContainers in Angular tutorials and examples: https://github.com/angular/angular/issues/42404

  - https://blog.bitsrc.io/running-node-js-in-your-browser-with-webcontainers-48ada077518e

  - https://angular.io/generated/live-examples/toh-pt6/stackblitz.html

- https://semver.org/



## Comments, suggestions?



Feel free to make comments/suggestions to me in the [Git issues section](https://github.com/jprivet-dev/angular-stackblitz-webcontainer/issues).



## License



This project is released under the [*MIT License*](https://github.com/jprivet-dev/angular-stackblitz-webcontainer/blob/main/LICENSE).