przemek-nowicki / Multi Page App With React
🔧 A lightweight, flexible webpack setup with React for multi page application development
Stars: ✭ 82
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Multi Page App With React
Webpack Starter Basic
A simple webpack starter project for your basic modern web development needs.
Stars: ✭ 552 (+573.17%)
Mutual labels: webpack, webpack4
Minimal React Webpack Babel Setup
The minimal React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 777 (+847.56%)
Mutual labels: webpack, webpack4
Cordova Template Framework7 Vue Webpack
Framework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement
Stars: ✭ 630 (+668.29%)
Mutual labels: webpack, webpack4
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (+392.68%)
Mutual labels: webpack, webpack4
React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-46.34%)
Mutual labels: webpack, webpack4
Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (+273.17%)
Mutual labels: webpack, webpack4
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+1139.02%)
Mutual labels: webpack, webpack4
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-57.32%)
Mutual labels: webpack, webpack4
Mocker Api
mocker-api that creates mocks for REST APIs. It will be helpful when you try to test your application without the actual REST API server.
Stars: ✭ 374 (+356.1%)
Mutual labels: webpack, webpack4
Vue Multiple Pages
A multiple Pages Starter use Vue-cli3
Stars: ✭ 1,079 (+1215.85%)
Mutual labels: webpack, webpack4
Js Library Boilerplate Basic
Javascript Minimal Starter Boilerplate - Webpack 5 🚀, Babel 7, UMD, Unit Testing
Stars: ✭ 354 (+331.71%)
Mutual labels: webpack, webpack4
Annotated Webpack Config
This is the companion github repo for the "An Annotated webpack 4 Config for Frontend Web Development" article.
Stars: ✭ 425 (+418.29%)
Mutual labels: webpack, webpack4
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (+274.39%)
Mutual labels: webpack, webpack4
Webpack Demos
📦 Demos && Courses for Webpack 4
Stars: ✭ 632 (+670.73%)
Mutual labels: webpack, webpack4
Vue Electron Template
An Electron & Vue.js template with Hot-reloading enabled and common Vue plugins, dev, debug and build scripts configured.
Stars: ✭ 260 (+217.07%)
Mutual labels: webpack, webpack4
Vue2 Spa Tutorial
Vue2.x（即将升Vue 3）、 Webpack 4.x、Babel 7.x
Stars: ✭ 267 (+225.61%)
Mutual labels: webpack, webpack4
Html Inline Css Webpack Plugin
☄️ A webpack plugin for convert external stylesheet to the embedded stylesheet
Stars: ✭ 48 (-41.46%)
Mutual labels: webpack, webpack4
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 <div id="app"> in the body tag.
Here's a code sample to illustrate this concept for an example static page with several React components:
A basic write up of this setup can be found on this Medium post.
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].