A scaffold project for a Webpack webapplication, without the overhead of specific libraries. It can be used to quickstart a prototype project for any kind of module-based webapplication. It has some preconfigured standards for development and production.
The only predefined technology in the stack, that has a direct impact to the coding, is a SASS preprocessor, for translating .scss
stylesheets. It's already added because there is no good reason for not using it. Apart from that there are no preset frontend libraries in this project.
- no predefined runtime dependecies
- Webpack + plugins
- Babel + presets
- SASS
- ESLint
- webserver for static content (i.e. Apache)
- browser
First git clone
this project.
Second, step into the new folder and remove the git remote:
git remote remove origin
After that install all the default dependecies:
npm install
Now the project is ready to use. You can start the dev server with npm run start
or create a deployable release version of it with npm run build
.
The index.html
can be found in the dist
folder. It's preconfigured to load the via Webpack generated module bundle.
If you have static resources, wich shouldn't be loaded by Webpack, put it in here. When running a build, Webpack generates the resource bundle into this folder. The content of this folder is production ready and can deployed / copied to any kind of webserver (i.e. Apache). It will be a standard ECMAScript 5 webapplication. Node.js and npm are not needed in production.
The main entry point of your web application is the index.js
, you can find in the src
folder. Start your implementation here. Use the ECMAScript 6 module-system, by using import and export.
The src
folder contains a little demo, to demonstrate how to handle modules and resoures with import / export. Just delete all demo.*
files and empty the index.js
to get rid of it.
All scripts and resources, that should be handled by Webpack, should be placed in the src
folder (except for the libraries you installed via npm). In the default configuration of this project Webpack can import .js and .jsx files (add React), .css and .scss files, JPG's, PNG's, SVG's and various Webfont files.
If you want to have a React application you just have to excecute npm install react react-dom
to add the frontend libraries. Then run npm install --save-dev babel-preset-react
to add the backend library for parsing JSX files.
Then just add the value react
to the presets in your .babelrc
file :
{
"presets": ["env", "react"]
}
Your now ready to use React and JSX!
To add Angular there is a littlebit more to do. You need the Angular libraries, of course, a Typescript-Loader, a little more configuration and some Plugins and Polyfills. The Angular documentation describes how to add Angular to a Webpack project: Angular with Webpack
If you publish a project, based on this scaffold, don't forget to:
- rename the project in the
package.json
- change the description in the
package.json
- change the author in the
package.json
- adapt the license in the
package.json
if you need - rewrite this
README.md
file - maybe use
git rebase --interactive --root
to squash the history of this project into one commit, so your project's history isn't bloated with stuff related to this scaffold :)
npm run start
- starts the application in a development server
- URL is shown on console
- refresh on every code change
npm run build
- creates the source bundle in the
dist
folder - content in
dist
folder is production ready
npm run clean
- cleans up the workspace by deleting generated sources
npm run lint
- executes a static code analysis in
src
- show's JavaScript problems and dirty code