Blob farm

• Blob farm
  • Introduction
  • Quick Start
    • Development mode
  • Documentation
    • Directory Structure
    • Typescript
    • Less
    • Ant Design
    • ESLint
    • Craco
    • Webpack
    • Webpack dev server
    • Nodemon
    • Express
    • Concurrently
    • VSCode + ESLint + Prettier
      • Installation guide

Introduction

The blob farm is an application with full-stack Typescript. It's configured for Back-end development with using ExpressJS framework for web services and Front-end development using ReactJS library with help of Typescript language and Less preprocessor for stylesheets.

Quick Start

# Install dependencies
yarn (or npm install)

# Start development server
yarn dev (or npm run dev)

Development mode

In the development mode, you will have a back-end server running with nodemon and a Front-end server running with the webpack dev server. The webpack dev server which helps with hot and live reloading for Front-end. The server-side Express code will be served by a node server using nodemon which helps in automatically restarting the server whenever server-side code changes.

Documentation

Directory Structure

Source code for Back-end and Front-end will be placed at src directory. /server directory is for the API.

Typescript

Typescript is a typed superset for Javascript that compiles to plain JavaScript. It's only for preventing miss-typing in development mood. In production mood it's just plain JavaScript.

Less

Less is a backwards-compatible language extension for CSS. Less helps to write CSS in a functional way and It's really easy to read and understand.

Ant Design

Ant Design is a design system for enterprise-level products.

ESLint

ESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript and Typescript.

Airbnb's Javascript Style Guide which has been used by the majority of JavaScript and Typescript developers worldwide. Since the aim is support for both client (browser) and server side (Node.js) source code, the env has been set to browser and node. Optionally, you can override the current settings by installing eslint globally and running eslint --init to change the configurations to suit your needs. no-console, comma-dangle and react/jsx-filename-extension rules have been turned off.

Webpack

Webpack is a module bundler. Its main purpose is to capable Front-end developers to experience a modular programming style and bundle JavaScript and CSS files for usage in a browser.

Craco

craco Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app.

Webpack dev server

Webpack dev server is used along with webpack. It provides a development server that enables live reloading for the client side code changes.

Nodemon

Nodemon is a utility monitors for any changes in the server-side source code, and automatically restarts the server. Nodemon is just for development purposes only. nodemon.json file is used to hold the configurations for Nodemon.

Express

Express is a web application framework for Node.js. It is used to build our backend API's.

Concurrently

Concurrently is used to run multiple commands concurrently. I's been used to run the webpack dev server and the backend node server concurrently in the development environment. Below are the npm/yarn script commands used.

VSCode + ESLint + Prettier

VSCode is a lightweight but powerful source code editor. ESLint takes care of the code-quality. Prettier takes care of all the formatting.

Installation guide

1. Install VSCode

2. Install ESLint extension

3. Install Prettier extension

4. Modify the VSCode user settings to add below configuration

   "eslint.alwaysShowStatus": true,
   "eslint.autoFixOnSave": true,
   "editor.formatOnSave": true,
   "prettier.eslintIntegration": true