Development Stack

Note

  • Work in Progress

Home page Web Technology Consulting


Components

The development stack is used to create, deploy, and manage web sites ,

VScode

Developers using Visual Studio Code 1 as Central Command and Control enables developing, managing, controlling, and deploying web sites. VScode, is a lightweight open source code editor that runs on local development computers, and is available for Linux, macOS, and Windows. It may be the best text editor in years

Git 2 source control is built-in to VScode. There are a wealth of easily install extension customizing VScode look and feel. Several color themes, programming language specific intelligence code completion, snippets, color coding, error checking, spelling, and many more are available.

Git

Git 2 is a key development stack component. It is a distributed version control system designed to track project file changes. Some of its attributes are speed, data integrity, and support for distributed, non-linear workflows and keeping track of file changes among multiple developers. Git is responsible for everything GitHub-related that happens on local development computer

GitHub

GitHub 3 is an online web hosted repository for git 2 projects. It is a platform for hosting versions of most type of project files in a remote repository that is a unified source of truth. It helps software teams collaborate and maintain the entire history of projects file changes. Developers can view history of changes and go back to a previous version. It helps answer the questions who changed what, where, when, and why?

A local copy of the project GitHub 3 repo is stored on the local development computer. Git is responsible for everything GitHub-related on the local development computer. Git 2 is used to stage edited local repo files, create the required why message, communicate with GigHub and commit staged file from the local development computer repo to the remote GitHub repo.

https://d33wubrfki0l68.cloudfront.net/76eda75af6e0d03b1b16a267cfe81f6ecf4bb2f4/247d4/_images/diffgitgithub.png

Git - GitHub Difference

Netlify

Netlify 4 is a popular Application Delivery Network (ADN). It provides continuous web deployment. When Netlify is notified of a commit to a shared GitHub repository that has been configured, or by the Netlify CLI Command 5 program running on the local development computer, Netlify builds the web sites from the shared repository and deploys the web worldwide to every major cloud provider. Netlify can deploy previews of web sites before pushing them to live site.

Using the Stack

Editing

Sphinx 6 is the framework for building this site. It requires using Markdown or reStructuredText for text material editing. My preference is reStructuredText.

Most development time is spent editing web site text material. The VScode reStructuredText Extension 7 dramatically speeds up development supports reStructuredText features:

  • Syntax highlighting quickly detects reStructuredText errors while typing or compiling, and may give hints about the problems

  • Frequent snippets of code can be quickly inserted

  • Section builder provides a quick way for setting section header levels

  • Live preview compiles source files in the background. Quickly invoking live preview while editing, shows how the edit will be displayed on the web

Deploy

Frequently viewing the state of the entire web site on the web helps

  • Deploying web site draft preview:

    # Compile reStructuredText to HTML

    make html

    # Deploy web site draft preview

    netlify deploy

    # View draft web site

    # Click on the Website Draft URL

  • Deploying a web site production version is similar:

    # Compile reStructuredText to HTML

    make html

    # Deploy production web site

    netlify deploy –prod

    # Click on the Website URL


Footnotes:

1

Visual Studio Code: https://code.visualstudio.com/

2

Git: https://git-scm.com/

3

GitHub: https://github.com/

4

Netlify: https://www.netlify.com

5

Netlify CLI Command: https://cli.netlify.com/

6

Sphinx : https://www.sphinx-doc.org/en/master/index.html

7

VScode reStructuredText Extension: <https://marketplace.visualstudio.com/items?itemName=lextudio.restructuredtext>

Home page Web Technology Consulting