jaredlunde / webpack2-react-sass-env-boilerplate Goto Github PK

4.0 3.0 2.0 22 KB

A boilerplate for creating Javascript packages with Webpack 3*, babel-preset-env, React + HMR, and SASS.

License: MIT License

CSS 0.87% HTML 6.09% JavaScript 79.55% Smarty 13.49%

react sass webpack2 webpack boilerplate boilerplate-template hot-reload code-splitting react-boilerplate webpack2-boilerplate

webpack2-react-sass-env-boilerplate's Introduction

webpack2-react-sass-env-boilerplate

A boilerplate for creating applications with Webpack 3+, Babel w/ babel-preset-env, React and SASS.

This package includes everything you need to start building an application with Webpack 3, React and SASS.

To use with a bash script:

Create create-app executable

echo '#!/bin/bash
if [ -z "$1" ]; then
  echo "No package name was provided."
  exit 1
fi

PKG_NAME=$1
mkdir $PKG_NAME
cd $PKG_NAME
npm init -y
npm install webpack2-react-sass-env-boilerplate
cp -r ./node_modules/webpack2-react-sass-env-boilerplate/. ./
mv package.json.tpl package.json
find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.ejs" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i.bak -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;
find . -type f -name "*.bak" -and -not -path "*/node_modules/*" -exec rm {} \;;
mv "./assets/css/{{PKG_NAME}}" "./assets/css/${PKG_NAME}"
npm start' > create-app

Make sure you can execute the script

chmod 0744 create-app

Execute the script w/ a package name

./create-app your-pkg-name

package.json

Here you'll find a list of devDependencies for creating this type of application, however, they are listed under 'dependencies' since I use this project as a grouped devDependency in my personal projects.

package.json.tpl

Here is an example of what your package.json might look like, were you to use this package as a devDependency. Should you choose to do so, you can install this package with the command:

npm install --save-dev webpack2-react-sass-env-boilerplate

server.js

Using the command NODE_ENV=development && node server.js will start your application with hot module reloading on port :3000 of your localhost, using the webpack configuration at webpack.config.dev.js and the index file at index.html.

webpack.config.dev.js

This is an example of a basic development webpack configuration file for this type of application.

webpack.config.js

This is an example of a basic distribution webpack configuration file for this type of application. Commented out are examples of implementing Modernizr and http2 aggressive code splitting.

.babelrc

This is an example of a basic Babel 6 configuration utilizing babel-preset-env.

/src

This is where example index files for both hot reloading (index.hot.js) and distribution builds (index.js) are located, as well as the 'Hello world' React component (App.js).

/assets

Development Javascript files are output to this folder from webpack.config.dev.js and static assets such as images and SASS can be placed in here.

webpack2-react-sass-env-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

romanlex sanjeet05

webpack2-react-sass-env-boilerplate's Issues

Why do you build both to es and dist?

Hi, what is the thinking behind build:es and build:commonjs? I'm trying to wrap my head around the config and understand why it is done.

kind regards,
Tarjei

Dist folder index?

When running the npm run build or npm run build:dist command I don't see a usable index.html file in the dist folder?

For now I copied the index.html file from the root:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>your-app</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="your-app"></div>

    <script src="/assets/modernizr.js" type="text/javascript"></script>
    <script src="/assets/vendor.dev.js" type="text/javascript"></script>
    <script src="/assets/your-app.dev.js" type="text/javascript"></script>
</body>
</html>

And changed it to:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>your-app</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="your-app.css">
</head>
<body>
    <div id="your-app"></div>

    <script src="vendor.js" type="text/javascript"></script>
    <script src="your-app.js" type="text/javascript"></script>
</body>
</html>

For it to be production ready the tool needs to be changed so it can do:

Have valid HTML start point
Put JS and CSS in proper folders

However npm run start works well for development.

I also noticed that when trying to add packages I got cross-env error. I added it, then I had a babel error, so I installed babel-cli. After that I could add the package I wanted to originally add. However each install it will run the npm build command.
Or am I doing something wrong?

Unexpected token: name (App) [{{PKG_NAME}}.js:662,4]

There is an issue when running webpack -p:
ERROR in {{PKG_NAME}}.js from UglifyJs Unexpected token: name (App) [{{PKG_NAME}}.js:662,4]

/*!********************!*\
  !*** ./src/App.js ***!
  \********************/
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(/*! react */ 28);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_styles_myStyles__ = __webpack_require__(/*! styles/myStyles */ 137);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_styles_myStyles___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_styles_myStyles__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return App; });




let App = class App extends __WEBPACK_IMPORTED_MODULE_0_react___default.a.Component {
	render() {
		return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
			'div',
			{ className: 'info-box' },
			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
				'h1',
				null,
				'Hello human'
			),
			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('img', { src: 'https://pbs.twimg.com/profile_images/3601970358/74c1908ecf47e17a329a1c8e82236715_400x400.png', alt: 'Red airship', width: '200', height: '200' }),
			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
				'p',
				null,
				'We will be boarding the airship soon...'
			)
		);
	}
};

Additional question: Do I just find and replace {{PKG_NAME}} or is there somewhere I can change it?

Problem with Hot Reloading

First of all, Thank you!! I have been looking for a boilerplate which includes React, SASS and webpack2 with most updated version and config. I had trouble setting up on my own, mainly on SASS compilers and also hot reloading.
I had cloned your repository and did

npm install 
node server.js

The modules compiled successfully, but when I make some changes to App.js and save it, these changes are not being reflected on the browser even after I reload the browser. could you please help me with this problem?