Git Product home page Git Product logo

react-express-webpack's Introduction

React boilerplate with ES2015, Express.js, and Webpack

Build Status GitHub license

Technologies

  • React (v16) + Redux (v3) + React Router (v4)
  • Express.js (v4) as production and development server
  • Webpack 4 (production and development configurations)
  • SCSS support (+ sanitize.css included)
  • ES2015+

Features

  • preconfigured router
  • React Material UI example theme
  • preconfigured modal windows
  • preconfigured eslint and Prettier code formatter
  • React Hot Loader
  • Linux/MacOS/Windows

Screenshots

Demo UI view:

Demo view

Development .js bundles:

Development js bundles

Production .js bundles:

Production js bundles

Production mode server output:

Production js bundles

Usage

Installation

git clone [email protected]:antonfisher/react-express-webpack.git
cd react-express-webpack
npm install

# remove boilerplate git references
rm ./.git

Scripts

# run development mode
npm run dev

# run production mode
npm run build
npm start

# run prettier
npm run prettier

# run lint
npm run lint

# run on a different port
HTTP_PORT=3001 npm run dev

License

MIT License. Free use and change.

react-express-webpack's People

Contributors

antonfisher 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  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  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-express-webpack's Issues

issue of 'fix browser history router'

Hi antonfisher,
Thanks for your repo.
I am a frontend beginner, and start to learn webpack.
may I know the reason you place
if (req.url !== '/' && !req.url.includes('.')) { request('http://localhost:${process.env.APP_PORT}/', (error, response, body) => res.end(body)); } else { res.sendFile(resolve(compiler.outputPath, 'index.html')); }
in the app.get('*', ...
I try to remove this and use only res.sendFile(resolve(compiler.outputPath, 'index.html'));, it fails.
I know this is a workaround, but have you figured out a decent way to fix it?

Thanks,
Chen

Steps to make the boilerplate "windows environment friendly"

Hello,
Thank you for a great boilerplate.

The build scripts works as expected on Linux and Mac. I have also tested the boilerplate on windows 10, and needed to apply some small modifications to package.json to build the project.

If you would like to make the boilerplate "windows friendly", here are the steps required:

Install the following packages:
npm i -D cross-env rimraf copyfiles

Modify scripts:

  "scripts": {
    "dev": "cross-env NODE_ENV=development node ./src/server",
    "start": "cross-env NODE_ENV=production node ./build/server",
    "prebuild": "rimraf build",
    "build": "npm run build:client && npm run build:server",
    "build:client": "cross-env NODE_ENV=production webpack -p --display-error-details --config=config/webpack.config.prod.js",
    "build:server": "copyfiles -a -u 1 src/server/** build",
    "lint": "eslint --ignore-path .gitignore --ignore-pattern node_modules -- .",
    "prettier": "prettier --ignore-path .gitignore --write './**/*.js'",
    "test": "exit 1",
    "release:patch": "npm run lint && npx standard-version -r patch && git push --follow-tags origin master",
    "release:minor": "npm run lint && npx standard-version -r minor && git push --follow-tags origin master",
    "release:major": "npm run lint && npx standard-version -r major && git push --follow-tags origin master"
  },

Regards
Leif Olsen

API Error

Hi,
Thanks you for your effort to make this boilerplate. I am integrating this to my own app.
I found a bug when I use mobile web browsers.
In localhost/servers, it show a modal with 'API Error, Type error, URL:/api/stats'.
And this happens on both mobile safari and chrome.

Thanks,
Sheng

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.