Skip to content

dev_guide.md

Latest commit

 

History

History
117 lines (79 loc) · 3.41 KB

dev_guide.md

File metadata and controls

117 lines (79 loc) · 3.41 KB
Raw

Developer's Guide

Getting the code

  1. Fork this repository,

  2. Clone your forked copy of the project;

    git clone https://github.com/<your_user_name>/www-v2.git

  3. Change to the project directory;

    cd www-v2

Setup Development Environment

This is a TypeScript project that uses React. You'll just need _Node.js and npm installed on your development machine. Although, this is sufficient to run, build, and test the project as a whole, you might need some extra tools for other development tasks.

You'll need tsc (TypeScript Compiler) to manually compile .ts files. You'll need ts-node (Node.js executable for TypeScript) to manually execute .ts scripts directly. Finally,

Once npm is installed, to install the above, run

npm i -g typescript
npm i -g ts-node

Note: Users on Linux and MacOS are required to add a sudo before these commands.

Check installation using

node -v && npm -v && tsc -v && ts-node -v

Output should look like

v23.7.0
11.1.0
Version 5.7.3
v10.9.2

Commands

After you are set-up, the steps you take depend on what you want to do:

  • Run a development server

    1. To install all the dependencies (in package.json), run

      npm install

    2. Run React scripts.

      • For unoptimized development serving, run

        npm run dev

        Visit localhost:5173 in a browser to view the web page served.

      • For generating a generic production build, run

        npm run build

      • For generating a production build under the subdirectory /www-v2, run

        npm run build

      • For serving the last production build (dist folder), run

        npm run preview

        Visit localhost:4173 in a browser to view the web page served.

Editor

All code is just plain text, so it doesn't really matter what you use to edit them. However, using modern, feature-rich IDEs/text-editors like: Atom, Brackets, WebStorm, Sublime Text, Visual Studio Code, etc. makes life way easier. These come with a directory-tree explorer, and an integrated terminal, at the very least, while having support for plugins/extensions to expand their functionality.

Some (non-exhaustive) benefits of using these are syntax highlighting, warning/error annotations, formatting, auto-refactoring, tons of customizable keyboard shortcuts, etc.

Visual Studio Code (VSCode) is currently the most-popular code editor for reasons like being lightweight, cleaner, large marketplace of extensions, integrated source control features, debugger, remote explorer support, regular expression based find/replace, etc.

Recommended extensions for this project are Babel JavaScript, ESLint, Git Graph,GitLens, markdownlint, Prettier, Tailwind CSS IntelliSense, and SVG.

All that, however, shouldn't necessarily stop you from using Emacs, Nano, or Vim, if that's your poison :D. Happy coding!