Configuring SPA to Run the Application

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

We'll cover the following

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

  1. Finally, Click the Run button and wait for the project to execute.
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('Welcome to angular!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});

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:
cp -r /usercode/* /usr/local/educative/angular/
  1. Data cannot be copied to the /usercode directory.
  2. 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.
  3. 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.
  4. 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.
  5. An image that takes longer than ~10 minutes to build cannot be built on our platform.