Giter VIP home page Giter VIP logo

react-template's Introduction

ReactNode-ExpressBoilerplate

A Full stack React and Node.js Boilerplate that is developed using React , Express.js Webpack4, Babel,EsLint and Jest.

Install

git clone https://github.com/sujilnt/ReactNode-ExpressBoilerplate.git`
yarn install

Features and Commands

Webpack Bundle visualisation

A plugin that Visualizes the size of webpack output files with an interactive zoomable treemap. - dev - development mode - prod - development mode - client - client bundles only will be analysed based on dev or prod mode. - server - server bundle only will be analysed based on dev or prod mode .

Commands for webpack Analyser
bundle-analyzer:client-dev
bundle-analyzer:client-prod
bundle-analyzer:server-dev
bundle-analyzer:server-prod

Webp - Image Format

Image format that supports lossy and lossless compression, as well as animation and alpha transparency. WebP images are smaller than their JPEG and PNG counterparts—usually on the magnitude of a 25–35% reduction in filesize. This decreases page sizes and improves performance. A node.js script that convert all images in png or Jpeg format in assets Folder .

Commands for webp - Image Format
node ./utils/covertImgtoWebP.js

All the webp information got insipired from web.dev.


Running the Project

For Development
 Client Side Run - yarn run client-dev:watch
 Server Side Run - yarn run server-dev:build
 or
	yarn run project (running both server and client side)
For Production
 Client Side Run - yarn run client-prod:build
 Server Side Run - yarn run server-prod:build


Testing

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. There is a mock folder inside src directory that is used for mock something like custom image etc. while writing automated test cases.

For running all the test cases
`yarn run test:coverage`

License

The code is available under the MIT license.

react-template's People

Contributors

sniper365 avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.