DEV Community

Michael Currin
Michael Currin

Posted on

React and Vue apps - with and without Node

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

GitHub logo 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

GitHub tag License

dependency - react Hosted with GH Pages

Preview


View site - GH Pages


Use this template

Documentation

View - Documentation

License

Released under MIT by @MichaelCurrin.




Vue

GitHub logo 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

GitHub tag License

Made with JavaScript dependency - vue Hosted with GH Pages

Preview


Use this template

Documentation

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

View - Documentation

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

GitHub logo 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

GH Pages Deploy GitHub tag License

Made with Node Made with Yarn Made with React

Preview

How to create a new React app

Use this project as a template

Use this template

Documentation

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

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 and made very minor changes to the app.




Vue

GitHub logo 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

Deploy GH Pages GitHub tag License

Made with Node Made with Yarn Made with Vue

Preview

Use this project

View site GH Pages

Use this template

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

View - Documentation

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";
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (2)

Collapse
michaelcurrin profile image
Michael Currin Author

I made a post series on React templates, going into very different approaches and how CI and imports work.

dev.to/michaelcurrin/react-templat...

Collapse
michaelcurrin profile image
Michael Currin Author

I've just released a PrimeVue frontend project. 🚀

GitHub logo MichaelCurrin / primevue-frontend-quickstart

Starter template for a PrimeVue site - without Node or a build step

PrimeVue Frontend Quickstart

Starter template for a PrimeVue site - without Node or a build step

GitHub tag License

dependency - vue dependency - primevue Hosted with GH Pages

Preview

What the web app looks like locally or on GH Pages


View site - GH Pages

Use this template

Documentation

How to use this template to make or extend a project

Plus more info on this project, PrimeVue and Vue.

View - Documentation

License

Released under MIT by @MichaelCurrin.