aelbore

Getting Started

• Install Dependencies

  npm init
  npm install --save-dev ts-node typescript tslib express @types/express
  

Create your web server

• Create server.ts in root folder of your app.

aelbore

const ts = require('typescript');
const fs = require('fs');
const path =  require('path');
const prettier = require('prettier');

const { promisify } = require('util');
const { globFiles, clean, mkdirp } = require('aria-fs');

const writeFileAsync = promisify(fs.writeFile);

aelbore

Getting Started

• Install Dependencies

  npm init -y
  npm install --save-dev vue @vue/cli http-server
  

Create Web Component

• Create vue component src/my-component.vue.

  <template>
  

aelbore

Getting Started

ng new ng-elements --enable-ivy

Create and Build HelloWorldElements

• Remove all the files in src/app folder
• Add hello-world.ts file in src/app folder
• Add Component

aelbore

Getting Started

ng new ng-elements --enable-ivy

Create and Build HelloWorldElements

• Remove all the files in src/app folder
• Create card.ts file in src/app folder
• Add Component

aelbore

<template>
  <div id="app">
    <div style="text-align:center;margin-bottom:20px;">
      <h1>Welcome to Vue</h1>
      <img width="200" src="https://vuejs.org/images/logo.png" />
    </div>
    <div class="cards">
      <div v-for="(profile, index) in profiles" v-bind:key="index">
        <Card :profile="profile" />
      </div>

aelbore

Testing in Vue

Write lots of tests so people will afraid to delete yout code
  - creator of redux
  
Don't just write tests that let you verify unit works with confidence.
Write tests that let you *delete* that unit of confidence.
  - creator of redux

aelbore

Requirements

• Docker Desktop on Windows (https://docs.docker.com/docker-for-windows/install)
• Mongodb Management Studio (https://robomongo.org/download)

Getting Started

1. Launch Terminal or Command Prompt
2. Type docker --version to check the version of docker
3. Pull docker image type docker pull mongo (this will get the latest version of mongodb)

aelbore

Testing in Vue

Write lots of tests so people will afraid to delete yout code

Why need test?

aelbore

Create your library

• Initialize project npm init -y
• Create esm module ./src/esm/my-lib.js

  function addNumber(value, value2) {
    return value + value2;
  }
  
  export { addNumber };