I'd like to share some GitHub repos I've put together for showcasing React and Vue apps.

These repos include instructions to setup locally and deploy to GitHub Pages. And you can view GitHub Pages live demos.

JS sites without Node

I've recently created Vue and React projects which only use 3 files each - covering HTML, CSS and JS.

No Node needed. No CI build step needed! Development environments and deploys are simpler.

And you can even use something close like JSX without using Babel, thanks to the HTM library.

No package.json or configs to maintain.

Yes, you lose some dev tooling, but for simple applications this approach can be be fine.

Especially if you just want to add interactivity to an existing website (which could be plain HTML or maybe Python or PHP). Without having to add Node and without restructuring your entire repo to match the Vue or React app structure.

React

MichaelCurrin / react-frontend-quickstart

Starter template using React on a website's frontend - without Node

React Frontend Quickstart ⚛️ 📦

Starter template using React on a website's frontend - without Node

Preview

Documentation

License

Released under MIT by @MichaelCurrin.

View on GitHub

Vue

MichaelCurrin / vue-frontend-quickstart

Starter template for a Vue 3 site - without Node or a build step

Vue Frontend Quickstart

Starter template for a Vue 3 site - without Node or a build step

Preview

Documentation

How to use this template to make and extend a project and more info on this project and Vue

License

Released under MIT by @MichaelCurrin.

View on GitHub

Node-based projects

If you are interested in my traditional Node-based SPA approaches, see these older repos of mine.

React

MichaelCurrin / react-quickstart

Starter template for a React app - including docs, CI, and hosting ⚛ 📦

React Quickstart ⚛️ 📦

Starter template for a React app - including docs, CI, and hosting

Preview

Create a new React app

Use this project as a template:

If you need something more minimal, see this Minimal app recipe.

Documentation

To install, run and deploy the app, see this project's docs:

To learn how to use this project and see how a React project works, see the Template notes section of the docs.

License

Released under MIT by @MichaelCurrin.

This project is based on the template from the React CLI. I have added my own docs, the deploy flow, made minor changes to the app, plus some additions to components.

View on GitHub

Vue

MichaelCurrin / vue-quickstart

Starter template for a Vue 2 site - including docs and CI deploy to GH Pages

Vue Quickstart

Starter template for a Vue 3 site - including docs and CI deploy to GH Pages

Preview

Use this project

After you've looked at the demo screenshot and site, you are welcome to create your own using the template button. This will copy this project and add it to your repos (no forking needed, but please star the original repo).

Documentation

How to install and run the app locally and deploy it to GH Pages

About

What is Vue?

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Why not React?

Vue is intended to be more beginner-friendly (I agree it is) and the vue repo has more GH stars than the react repo, if that is any indication of adoption by the community.

Vue is open-source and was created by one person originally. React was created at Facebook.

Resources

Need are some resources…

View on GitHub

Loading dependencies

A note on dependency management in the "frontend" repos linked above.

I'm not using package.json in Node or using script tags to load React and Vue on the HTML frontend.

I've used the newer ES Module syntax in the JavaScript file.

For example, in main.js:

import React from "https://dev.jspm.io/react@17.0";

You can view that in the browser to:

https://dev.jspm.io/react@17.0

Which in turn loads more JS scripts.

So you'll load this as React:

dev.jspm.io/npm:react@17.0.2/cjs/react.development.dew.js

You can explore the directory of available scripts as:

https://dev.jspm.io/npm:react@17.0.2/

Within a JS script that is an ES Module, you can load other local modules too, so you can still have multiple JS files.

main.js

import { foo } from "./lib.js"

The frontend will just fetch main.js and then lib.js as an extra call.

Badges

By the way, I created these badges above using my Badge Generator project.

https://michaelcurrin.github.io/badge-generator/