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.
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.
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.
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…
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.
Top comments (2)
I made a post series on React templates, going into very different approaches and how CI and imports work.
dev.to/michaelcurrin/react-templat...
I've just released a PrimeVue frontend project. 🚀
Starter template for a PrimeVue site - without Node or a build step
PrimeVue Frontend Quickstart
Preview
Documentation
Plus more info on this project, PrimeVue and Vue.
License
Released under MIT by @MichaelCurrin.