Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/persteenolsen/gh-pages-react-node-orm-client

A React client hosted at GH Pages - Working towards a Node ORM Web API serving as a menbership system
https://github.com/persteenolsen/gh-pages-react-node-orm-client

Last synced: 29 days ago
JSON representation

A React client hosted at GH Pages - Working towards a Node ORM Web API serving as a menbership system

Awesome Lists containing this project

README 

        
# A React client for Node Express Sequelize Web API with Login hosted at GH Pages



Last updated: 02-12-2024



Node Version 14.x because higher versions of Node fails at GH  



A React client - for a Node Express Sequelize MySQL Web API - using Webpack 5, Babel 7, PostCSS and Sass with a hot dev server and an optimized production build. Babel compiles ES6+ and React to ES5. Some older Browsers like IE 11 are partly supported 



This React client have functions adapted to GH Pages using HasRouting 



The React client uses DevOps by GitHub + Actions + Pages 



Files adapted with "gh-pages-react-node-orm-client/" for the React client running under a subdomain at GH Pages:

- config/webpack.prod.js

- src/app/index.jsx



Files adapted with different code for the React client running under a subdomain at GH Pages:

- src/index.js

- src/app/index.jsx

- src/service/account.service.js ( targeting new Node.js Web API endpoints )



Files adapted at the Node.js Web API for receiving requests from the client at GH Pages:

- accounts/accounts.controller.js 



# Usage



# Installing



- Make sure you have a new version of Node installed

- Download the code by zip or fork

- Run the command npm install by the command promt



# Development server:



- npm run start

- You can view the development server at `localhost:8080`.



# Production build:



- npm run build



# To view the build use http-server:



- npm run prod



# Features



- [webpack](https://webpack.js.org/)

- [React](https://reactjs.org/)

- [Babel](https://babeljs.io/)

- [Sass](https://sass-lang.com/)

- [PostCSS](https://postcss.org/)



# Dependencies 



# React



- [`react`](https://www.npmjs.com/package/react) - React is a JavaScript library for creating user interfaces. For creating React components.

- [`react-dom`](https://www.npmjs.com/package/react-dom) - This package serves as the entry point to the DOM and server renderers for React. 

- [`react-router-dom`](https://www.npmjs.com/package/react-router-dom) - This package serves as DOM for React Router. 



# Other 



- [`core-js`](https://www.npmjs.com/package/core-js) - Main Library with polyfills for older Browsers

- [`whatwg-fetch`](https://www.npmjs.com/package/whatwg-fetch) - For making promise based web request progammitically



#  devDependencies



# webpack



- [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.

- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack

- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack

- [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify dev/prod configuration



# Loaders



- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files - Babel/webpack

- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS

- [`node-sass`](https://github.com/sass/node-sass) - Node Sass

- [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS

- [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Default for PostCSS

- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports

- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM



# Babel



- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to ES5

- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel

- [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react) - Defaults Babel React



# Plugins



- [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders

- [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory

- [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template

- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files

- [`css-minimizer-webpack-plugin`](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/) - Optimize and minimize CSS assets

- [`cross-env`](https://github.com/kentcdodds/cross-env) - Cross platform configuration

- [`path`](https://www.npmjs.com/package/path) - Node Path moule

- [`http-server`](https://www.npmjs.com/package/http-server) - HTTP server for testing the produktion build by running npm run prod



# Author



- Per Olsen



# License



This project is open source and available under the [MIT License](LICENSE).