https://github.com/przemek-nowicki/multi-page-app-with-react

:wrench: A lightweight, flexible webpack setup with React for multi page application development
https://github.com/przemek-nowicki/multi-page-app-with-react

mpa multi-page-application multi-page-boilerplate react webpack webpack-boilerplate webpack4

Last synced: about 2 months ago
JSON representation

:wrench: A lightweight, flexible webpack setup with React for multi page application development

• Host: GitHub
• URL: https://github.com/przemek-nowicki/multi-page-app-with-react
• Owner: przemek-nowicki
• Created: 2019-04-03T15:00:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T06:00:39.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T23:23:04.618Z (3 months ago)
• Topics: mpa, multi-page-application, multi-page-boilerplate, react, webpack, webpack-boilerplate, webpack4
• Language: JavaScript
• Homepage:
• Size: 2.25 MB
• Stars: 96
• Watchers: 6
• Forks: 36
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Multi Page App with React

A lightweight, flexible Webpack setup with React for multi page application development. 


You should consider this setup when you want to use React for some sections of your page(s), but you don't want to make it Single Page Application (SPA) with only a `
` in the body tag.


Here's a code sample to illustrate this concept for an example static page with several React components:

![picture alt](http://assets.miwu.pl/mpa-with-react-example.png "MPA with React example")

A  basic write up of this setup can be found on this [Medium post](https://itnext.io/building-multi-page-application-with-react-f5a338489694).

**Notice:** the latest code base includes the following updates: 

- webpack bundles with hashed filenames

- code linter (with Airbnb style guide)

- enabled CSS modules (added example css styles)

- minimize webpack bundles with TerserPlugin (i.e. js code minification)

- file loader to resolve imports on fonts and images (added example product image)

## Quick Start

install dependencies

```

$ npm install

```

## Development & Build

**dev**

```

$ npm start

```

***start** script runs server in development mode with hot module replacement and open the browser after server had been started.*

**build**

```

$ npm run build

```

***build** script runs in production mode to improve load time (i.e. minified bundles, lighter weight source maps etc)*

**linting**

```

$ npm run lint

```

***lint** script runs linter to check for lint errors in src directory*