docs: Update deploy.md, docs/template-notes/README.md, comparison.md, features.md, packages.md and resources.md

MichaelCurrin · MichaelCurrin · commit 07e2e0376bd0 · 2021-05-25T23:03:21.000+02:00
diff --git a/docs/deploy.md b/docs/deploy.md
@@ -21,8 +21,7 @@ See the [main.yml](/.github/workflows/main.yml) workflow file and the repo's _Ac
 
 ## Hosting
 
-The output directory from the [Build](#build) section can be served as static content using Nginx or a static hosting service like Netlify or GitHub Pages. You do not need Deno running host this site.
-
+The output directory from the [Build](#build) section can be served as static content using Nginx or a static hosting service like Netlify or [GitHub Pages][]. You do not need Deno running host this site.
 
 To set up GitHub Pages:
 
diff --git a/docs/template-notes/README.md b/docs/template-notes/README.md
@@ -2,13 +2,17 @@
 
 <!-- You can delete this directory on your copy of this template. -->
 
+The aim of this project is to demonstrate how to use Deno to develop a React app, in place of using Node.js.
+
+
+## Menu
+
+The notes here describe how this project was created, how to maintain it and some links to other projects.
+
 - [Features](features.md)
-- [Purpose](purpose.md)
 - [Comparison with other projects](comparison.md)
 - [Limitations](limitations.md)
 - [TypeScript with JSX](ts-jsx.md)
-
-Learn more:
-
+- [Packages](packages.md)
 - [Resources](resources.md)
-- [Related projects](related-projects.md)
+- [Rendering](rendering.md)
diff --git a/docs/template-notes/comparison.md b/docs/template-notes/comparison.md
@@ -16,17 +16,19 @@ Here is what I found searching for "React Deno". They all use Deno on the server
     - two directories for backend in Node or React and `react` directory for frontend (note `package.json`).
 - [Build an Isomorphic Application using Deno and React without WebPack](https://decipher.dev/deno-by-example/advanced-react-ssr/) guide.
 
-Server-side rendering means running a Deno server in production and structuring as an API or an MVC. Maybe with a database.
+Server-Side Rendering means running a Deno server in production for _dynamic content_. It means structuring as an API or an MVC app. Maybe with a database.
 
-This is not relevant for me, looking for make a Single-Page Application that can be served as static files with Nginx or GH Pages.
+This is not relevant for me, looking for make a Single-Page Application that can be served as _static_ files with Nginx or a service GH Pages.
 
-Some of these handle Node and NPM to build the React frontend. Which I think misses the point of Deno as a Node replacement.
+Some of the Deno projects above handle Node and NPM to build the React frontend... which I think misses the point of Deno as a Node replacement.
 
 
 ## Frontend
 
 Some others use Deno to handle a React dev server like I want. But they don't support a step to build a static app. I can't recall one of those.
 
-I did also find this which bundles a client-side React app. But, it is designed to be used with the SSR Deno, which I don't want. Also there is code there I don't need. I want to stick to the basics. Also that uses `Deno.bundle` in TS code instead of in the terminal which seems weird.
+I did also find this which bundles a client-side React app. But, it is designed to be used with the SSR Deno, which I don't want. Also there is code there I don't need. I want to stick to the basics.
+
+Also that uses `Deno.bundle` in TS code, while I prefer to use the light Deno CLI commands.
 
 - [How To Bundle Code For Deno Web Applications](https://dev.to/craigmorten/deno-bundle-for-server-side-rendered-react-11c2) post
diff --git a/docs/template-notes/features.md b/docs/template-notes/features.md
@@ -1,16 +1,15 @@
 # Features
 > A list of features of this project
 
-
 - Outline of a basic React built with React.
 - Two modes for running your React app.
-    - Start a dev server.
+    - Start a dev server which rebuilds on JS changes.
     - Create a production build - then serve it a locally or on your production server.
 - Task running through Deno and `make`.
     - See [Makefile](/Makefile) or run `make help` for commands.
     - This flow replaces using `package.json` and `npm/yarn run`.
-    - Light on configuration files and dependencies. No need to install ESLint, a test runner or TypeScript. These are all built into Deno. Deno also handles `.jsx` files out the box.
+    - Light on configuration files and dependencies. **No** need to install ESLint, a test runner or TypeScript. These are all built into Deno. Deno also handles `.jsx` files out the box.
 - Documentation is included - see [docs/](/docs/).
 - GitHub Actions CI is included.
-    - See the workflow in [.github/](/.github/).
+    - See the workflow in [.github/workflows](/.github/workflows/).
     - This builds the app and deploys static assets for serving your React Single-Page Application.
diff --git a/docs/template-notes/packages.md b/docs/template-notes/packages.md
@@ -1,8 +1,15 @@
 # Packages
 
+
+## Overview
+
+The core of this application is built on using React and React-DOM libraries, which are imported from the JSPM CDN - see [dev.ts](/deps.ts).
+
+The Deno package _Abc_ is used as a dev dependency to serve assets.
+
 ## Dev packages used
 
-This is aboutbdev dependencies in set in the [dev_deps.ts](/dev_deps.ts) module.
+This is about dev dependencies in set in the [dev_deps.ts](/dev_deps.ts) module.
 
 ### Abc
 
@@ -16,6 +23,8 @@ The `jsx` section was used as a starting point for the dev server of this projec
 
 The `static` directory was used for this project's static server. In Node, there are a ton of options for packages for static servers, some that live reload and don't need a script (so they can be run as CLI tools). You could also use Nginx or Python or VS Code's Live Server extension. Anything to preview the build output locally before deploying it.
 
+This package must be kept separately in the [dev_deps.ts](/dev_deps.ts). It is not needed at all on the frontend. Also, if it _is_ included (and not even used) in [deps](/deps.ts), then unfortunately it gets added to the bundle output including references to `Deno` which break on the frontend as `undefined`.
+
 
 ## Maintaining versions
 
diff --git a/docs/template-notes/resources.md b/docs/template-notes/resources.md
@@ -1,4 +1,26 @@
 # Resources
 
+## Tools used
+
 - [Deno](https://michaelcurrin.github.io/dev-resources/resources/javascript/deno/) resources.
-- [React](https://github.com/MichaelCurrin/learn-to-code/blob/master/en/topics/scripting_languages/JavaScript/libraries/react.md) resources.
+- [React](https://michaelcurrin.github.io/dev-resources/resources/javascript/packages/react/) resources.
+
+## Related projects
+
+### React
+
+- [![MichaelCurrin - react-quickstart](https://img.shields.io/static/v1?label=MichaelCurrin&message=react-quickstart&color=blue&logo=github)](https://github.com/MichaelCurrin/react-quickstart)
+    - React and Node. Conventional flow using a project generated with `npx create-react-app`, plus CI to deploy.
+- [![MichaelCurrin - react-frontend-quickstart](https://img.shields.io/static/v1?label=MichaelCurrin&message=react-frontend-quickstart&color=blue&logo=github)](https://github.com/MichaelCurrin/react-frontend-quickstart)
+    - React but without Deno, Node or a build step.
+    - This used ES Modules to load packages by URL - so it is similar to this React Deno project.
+
+### Deno
+
+- [![MichaelCurrin - deno-project-template](https://img.shields.io/static/v1?label=MichaelCurrin&message=deno-project-template&color=blue&logo=github)](https://github.com/MichaelCurrin/deno-project-template)
+    - A generic Deno project.
+
+### Node
+
+- [![MichaelCurrin - node-project-template](https://img.shields.io/static/v1?label=MichaelCurrin&message=node-project-template&color=blue&logo=github)](https://github.com/MichaelCurrin/node-project-template)
+    - A generic Node project.
