Single Page App Widget

Web development is evolving, so developers like to keep up with new technologies and best practices. Educative provides a hands-on learning environment to allow learners to build real projects. You can use the 'SPA widget' to create front-end applications.

We'll cover the following

This is what it looks like:

Edit mode
Edit mode

What do I need to know?

  • Line Numbers: You can choose to hide or include line numbers in all files through this checkbox.

  • Hide Code: You may want learners to interact with the output application only. To hide the code, mark this checkbox.

  • Show Console: You may want learners to monitor the execution on the console along with the webpage. Mark the checkbox to enable console.

  • Render Output Tab in Mobile View: You can enable this feature to view the application in mobile view.

  • Loaders: You can choose the loader of your choice from the available 6 frameworks:

    • React

    • Dart

    • Typescript React

    • Elm

    • Vue.js

    • GoJS React

  • Add Hello World for <loader>: You can generate a simple “Hello World” application for the selected loader.

  • Add NPM Package: You can define all the packages you will need for your React application. Simply search it by name. If you want a specific version of the package, write next to it. This button works only for the default React loader.

  • Code Height: You can specify the size of the coding window in pixels.

  • Output Height: You can specify the size of the output window in pixels.

  • Highlight lines: You can highlight important lines of code in any file. Open the file from the side panel and enter the line ranges. For example:
    1-3
5
    This will highlight lines 1-3 and line 5 of the selected file.

  • Hide File: You may find a file irrelevant to learners. Open the file from the side panel and mark this checkbox.

  • Mark current file as read-only: You may want learners not to alter a particular file. Open the file from the side panel and select this checkbox.

  • Mark as Primary File: You may want learners to view a particular file at first glance. Open the file from the side panel and mark this checkbox.

  • Upload File: You can upload a file locally to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • Upload Folder: You can upload a folder locally to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • New File: You can add a new file to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • New Folder: You can add a new folder to your program. This button creates a file in the main directory, i.e., usercode folder at the backend. Once a folder is created you can create another folder or file inside it.

  • Disable Execution: Select this checkbox to make the program nonexecutable. By default, learners can run the code.

Example

Below is an example of a simple React application.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

Can I link my GitHub account?

It's very common to add our code repositories on GitHub.

  • Provide github token: You can access the code from your GitHub repository by adding your personal access token here.

  • Import code from Github: You can specify the repository path and import programs. The size of the project should be less than 750 KB. Otherwise, the SPA may not work as intended.

GitHub limits the number of times a code can be imported from a repository anonymously. Usually, this limit is not very high to avoid unnecessary spam/attacks. If the limit is reached, the code can not be imported. You can overcome this error by following certain steps. To begin, follow the steps below:

  • Step I: Sign into your personal GitHub account and visit this page. It will open the page like below:

  • Step II: In the “Note” field, add a note explaining why you need a token.

  • Step III: Next, you’ll see the “Select scopes” option. If you check any of the options, you’ll allow a third party to perform the chosen operations on your repository. So choosing the write or read key would allow a third party to read/write to your repository. When you scroll to the end of the page, you’ll see the “Generate token” button; click it. You’ll see a section like the one below.

The green section shows the token generated. Copy the token and save it somewhere since you won’t be able to see it again. Paste this token in the “Provide GitHub token” option. Now, go to the “Import code from Github” option and import the required code. This time, error 403 will not show up.

Personal tokens have a much higher import limit since GitHub can identify your account because you’re not anonymously importing; hence, the spam/attack security risk is considered relatively less.