DevToolKit1/README.md

Developer Kit Day1

Developer Kit : Frontend

Focus

• HTML
• CSS
• Javascript

Tools

• Visual Studio Code
  • Ubuntu 20.04

  // to install from Snap store
  $ sudo snap install --classic code
  
  // to run vscode
  $ code .
  

• NodeJS

Visual Studio Code Extension

• Live Server
• Debugger for Chrome

Debugger

• add debugger to code to stop and debug at chrome
• VS Code Debugger

Prepare Project

• ReactJS view is coded in xml markup and compiled using babel to plain R React code

Frontend with ReactJS (Client)

• Packages
  • create-react-app

  $ npm -g install create-react-app
  

  • Create project "frontend_client" using React Framework code

  $ npx create-react-app frontend_client
  

  • Start the client

  $ cd frontend_client
  $ npm start
  

  • Use Browser to browse "http://localhost:3001"
  • Misc : bootstrap css component for styling

  $ npm i bootstrap
  
  

  • index.js

  import 'bootstrap/dist/css/bootstrap.css'
  

  • VScode Extension
    • Simple React Snippet
  • Debugging : Chrome React Developer Tool Extension

Backend with ExpressJS (Server)

• Packages
  • express

  $ npm install -g express-generator
  

  • Create project "backend_server" using Express Framework code with pug (Jade) view

  # express --view=pug backend_server
  

  • Start the Server

  $ cd backend_server
  $ npm start
  

  • Use Browser to browse "http://localhost:3000"