Giter VIP home page Giter VIP logo

udaypydi / react-simple-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
39.0 4.0 7.0 10.15 MB

Simple React Boilerplate with Webpack, Github Actions, Scss, Lazy Loading etc....

Home Page: https://react-simple-boilerplate.vercel.app

License: MIT License

JavaScript 97.44% HTML 0.61% SCSS 1.95%
react travis-ci npm webpack react-testing-library jest eslint webpack-dev-server react-boilerplate scss yarn tailwindcss hacktoberfest hacktoberfest2020

react-simple-boilerplate's Introduction

Start your next react project in seconds

A simple react boilerplate with webpack hmr and latest babel packages. It comes with inbuilt Travis-CI for PR checks, lint checks and builds. Kick start the development with tailwind css, react hooks and much more. It comes with an inbuild typescript support. So you dont have to worry anymore to add typescript files to your project.

This React Boilerplate works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.

Quick Overview

git clone https://github.com/udaypydi/react-simple-boilerplate.git
cd my-app
yarn install
npm run dev

Then open http://localhost:9000/ to load your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

Get Started Immediately

You don’t need to install or configure tools like webpack or Babel.
They are reconfigured and hidden so that you can focus on the code.

Clone the project, and you’re good to go.

Prerequisites

Creating an App

You’ll need to have Node 10.16.0 or higher version on your local development machine. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app, you should clone this repository using the following command:

Clone

git clone https://github.com/udaypydi/react-simple-boilerplate.git my-app

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure.

No configuration or complicated folder structures, only the files you need to build your app.
Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

yarn install

It will install all the packages that are required for project to up and running

npm run dev

Runs the app in development mode.
Open http://localhost:9000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

npm run test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

Read more about testing.

npm run lint

Runs the eslint over the src dir. You get a list of list errors and warnings if any.

npm run lint:fix

Run this command to autofix eslint issues. All the autofixable issues will be fixed.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

Website

This website is built using Docusaurus 2, a modern static website generator.

Installation

$ yarn

Local Development

$ yarn start

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

Build

$ yarn build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment

$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.

react-simple-boilerplate's People

Contributors

dependabot[bot] avatar mvhk avatar udaypydi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

react-simple-boilerplate's Issues

Add sample test cases

Is your feature request related to a problem? Please describe.
Add sample test cases

Solution
Use react-test-library and jest

Add image loaders in webpack

webpack needs a file loader in order to support images. Add file-loader for all the assets in webpack prod and dev configs.

Generic Loader Set Up

Is your feature request related to a problem? Please describe.

Generic loader set up.

Create a CLI with Inquirer

Is your feature request related to a problem? Please describe.
Currently the react simple boilerplate is just a package. Make it an interactive cli tool.

Describe the solution you'd like
Use inquirer:
https://www.npmjs.com/package/inquirer

Describe alternatives you've considered
yargs was considered earlier.

Add Contribution.md

Add a contribution guideline document so that it guides the contributors in submitting PRs to the repository

Add styled components support

The boilerplate supports scss styling currently. Add styled components to the boilerplate for prop based style handling and scope resolution

Add theming support

Is your feature request related to a problem? Please describe.
Add a theming support. Anyone should be able to get started by just passing a config (JSON)

Add git pre commit hooks

  • Currently the lint and test cases checks runs whenever the PR is raised. It would be great if the lint checks are done before commit, so that it avoids an extra commit to fix lint.

Add tailwindcss support

Is your feature request related to a problem? Please describe.
A library for handling css in an easier way

Describe the solution you'd like
Tailwind css

Describe alternatives you've considered
Css, Scss, ui libraries

create a base webpack config

move common webpack configs to a base file. Create a webpack.base.config.js file and move the common loaders, plugins to the file.

Theming support

Add theming support in the form of a HOC where the root App component is wrapped with an HOC to pass the theme throughout the project.

 ex: withTheme(App)

Create an interactive CLI

**Is your feature request related to a problem?
Currently this project has to be cloned or forked everytime to set up a project. Set up an interactive cli like create-react-app

Move Out Of Travis To Github Action

Is your feature request related to a problem? Please describe.
Current implementation is on top of travis ci which validates every PR to master.

Describe the solution you'd like
Move the ci shields to Github Actions. Create two versions of shields one one older version of node and one on stable version of node.

Describe alternatives you've considered
Github Action

Update document

Is your feature request related to a problem? Please describe.
The document is old compared to the number of features added.

Describe the solution you'd like
Add the new features to documentation

Describe alternatives you've considered
N/A

Additional context
N/A

Add typescript support

Is your feature request related to a problem? Please describe.
Add support for typescript.

Describe the solution you'd like
Add tsconfig and ts-loader in order to support typescript

Describe alternatives you've considered
Currently the boilerplate supports js, jsx

Additional context
N/A

Monolith using lerna

Is your feature request related to a problem? Please describe.
Create a monlith using lerna

Describe the solution you'd like
yarn workspaces are good for monlith repos but has complexities in publishing the packages and maintaining versions.

Describe alternatives you've considered
yarn workspace was tried earlier. Use lerna.

Add HMR support

Is your feature request related to a problem? Please describe.
Add hmr support so that page reload isn't required anymore.

Describe the solution you'd like
Add a webpack dev middleware and a hot module loader for the app.

Add recoil support

Is your feature request related to a problem? Please describe.
Add recoil support to boilerplate

Fix: (lint staged) and git pre hooks

Describe the bug
Git pre commit hooks doesn't work as expected.

To Reproduce
Steps to reproduce the behavior:

  1. Make code changes
  2. git add
  3. git commit

Expected behavior
Should run tests and lint on the staged files.

Add react router v5

Add react router v5 to the boilerplate. Easy to set up and configurable routes should be the first priority.

Improve Readme

Currently the Readme of the project is very basic. A good project always need a good readme. Contributions to the README are most welcome.

Lazy Load Components

Lazy Load index components so that the index bundle size is reduced. Add loader component in Suspense API as a fallback while lazy loading.

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.