Gain insights into running an Angular app using Docker and LiveVM. Delve into step-by-step processes for building and running a Single Page Application inside a live virtual machine.

angular.tar.gz

angular

This is a step by step guide to build and run a Single Page Application inside a live VM. A VM will be allocated on which a docker container will be launched hosting the application.

How to Run an Angular Application using Docker and LiveVM

## Steps to Run Angular Application in SPA

1. Create a SPA widget in the lesson.

2. Select the docker job, `angular`.

3. Remove all the existing files in the SPA.

4. Click, **Import code from Github** and paste the following link:
> https://github.com/arqambinrehan/angular_demo


5. Finally, Click the **Run** button and wait for the project to execute. 


# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false


# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out

# dependencies
/node_modules

# profiling files
chrome-profiler-events.json
speed-measure-plugin.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db


# Angular

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.1.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).


# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/angular'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};


React

Dart

GoJS React

Typescript React

Vue.js

> **Points to Note:** 
>1. Code on the front-end/edit-view that you see above is placed in the usercode directory. Every time we press the *Run* button (in the widget above), the code from the user’s end is copied from `usercode` to the directory your project files are placed in at the backend.
>    * For example in our case we copy user's front end code from
`usercode` to `/usr/local/educative/angular`
This can be achieved by adding the following line to `Run` script or `Start` script:
>```shell
>cp -r /usercode/* /usr/local/educative/angular/
>```
>2. Data cannot be copied to the `/usercode` directory.
>3. How can *watchers* be helpful: every time the code is run, it is copied to the relevant folder and when a change is made in that folder, the watcher will detect it and automatically run the code again, for example, `nodemon` is an example of a watcher.
>4. It is preferable to use 
>    * SPA for HTML output and server-client interaction
>    * Code widget for stdout 
>    * However, you can also display HTML output using the code widget by checking the >    *Display As HTML Output* box in **edit** mode.
>5. Always set up your code on your local machine before setting it up on Educative's Docker feature. In this way, you’ll know the exact steps that are required for the setup of your application which will be easier to set up the environment in Docker. 
> 6. An image that takes longer than ~10 minutes to build cannot be built on our platform.

# Steps to Run Angular Application in SPA

1. Create a SPA widget in the lesson.

2. Select the docker job, `angular`.

3. Remove all the existing files in the SPA.

4. Click, **Import code from Github** and paste the following link:
> https://github.com/arqambinrehan/angular_demo


This lesson gives a demo regarding how to configure SPA to run an Angular application. 

__default

Configuring SPA to Run the Application