DEV Community

loading...

React and Vue apps - with and without Node

michaelcurrin profile image Michael ・2 min read

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 site - without Node or a build step

Vue Frontend Quickstart

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

GitHub tag License

dependency - vue 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 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 and deploys GitHub Pages ⚛️ 📦

React Quickstart ⚛️ 📦

Starter template for a React app - including docs and deploys to GitHub Pages

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

View demo - React Quickstart

Use this template

Create a fresh project

Note that this project will not be up to date in terms of structure as dependencies, in comparison to the original Create React App repo was is used to generate the code for this repo.

So you may prefer to generate a fresh app using the command below from the Getting Started guide.

$ npx create-react-app my-app
$ cd my-app
$ yarn start
Enter fullscreen mode Exit fullscreen mode

Then add the docs and CI setup based on this React Quickstart template repo.

Documentation

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

Docs

Template notes

To learn how to use this project and see how a React project works - see the About page of the template's notes.

…

Vue

GitHub logo MichaelCurrin / vue-quickstart

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

Vue Quickstart

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

GH Pages Deploy 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 fork this project and add it to your repos.

Documentation

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

View docs

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 to get started or learn more advanced topics?

See…

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 (1)

pic
Editor guide
Collapse
michaelcurrin profile image
Michael 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.