Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/persteenolsen/react-typescript-sequelize-users-client-polyfill-basic

React TypeScript SPA Client working together with a Node Express Web API using sequelize and serving as a membership system
https://github.com/persteenolsen/react-typescript-sequelize-users-client-polyfill-basic

Last synced: 29 days ago
JSON representation

React TypeScript SPA Client working together with a Node Express Web API using sequelize and serving as a membership system

Awesome Lists containing this project

README 

        
# A React TypeScript client for Node Express Sequelize Web API Sign up with Email verification Boilerplate



# Last updated:



- 02-12-2024



# Node Version:



- 14.x - Higher version are not running at GH



A React TypeScript 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. React with JavaScript is supported in .jsx files and React with TypeScript is supported in .tsx files.



# 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).