README.md

Test app using webpack

Test app using PUGJS templating engine to demonstrate the power of using CSS to implement design. For a job application I tasked to build and style this interface from a Figma file.

https://www.figma.com/file/k24Ot3lNJrBaMzsfJabQ1U/UXE-Task?node-id=202%3A186

TLDR;

To view the end production ready result:

Clone the repo and drop the dist/index.html into your browser.

Clone the repo and install dependencies

git clone https://github.com/Awethentique/test-demo-app-pugjs.git
cd test-demo-app-pugjs
npm i

Usage

Development server

npm run start

Production build

npm run build

Features

• Webpack
• Babel
• Core-js
• Pug
• Sass
• PostCSS
• ESLint
• jQuery

Dependencies

Webpack

• webpack - Module and asset bundler
• webpack-cli - Command line interface for Webpack
• webpack-dev-server - Development server for Webpack
• webpack-merge - Simplify development and production configuration
• cross-env - Cross platform configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/preset-env - Smart defaults for Babel
• @babel/eslint-parser - Is a parser that allows ESLint to run on source code that is transformed by Babel.
  • eslint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code
  • eslint:recommended - An extends property value "eslint:recommended" enables a subset of core rules that report common problems
  • eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier
  • eslint-plugin-html An ESLint plugin to extract and lint scripts from HTML files
  • eslint-plugin-import ESLint plugin with rules that help validate proper imports
  • eslint-plugin-prettier ESLint plugin for Prettier formatting
• core-js - Modular standard library for JavaScript, includes many polyfills

Loaders

• babel-loader - Transpile files with Babel and Webpack
• sass-loader - Load SCSS and compile to CSS
• sass - Sass makes CSS fun! ;)
• postcss-loader - Process CSS with PostCSS
  • cssnano - Optimize and compress PostCSS
  • autoprefixer - Parse CSS and add vendor prefixes
• css-loader - Resolves CSS imports into JS
• pug-loader - Pug loader template
• style-loader - Inject CSS into the DOM
• file-loader - Copy files to build folder

Plugins

• html-webpack-plugin - Generate HTML files from template in our case pug
• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• mini-css-extract-plugin - Extract CSS into separate files
• terser-webpack-plugin - Minify JavaScript
• workbox-webpack-plugin - Workbox provides two webpack plugins: one that generates a complete service worker for you and one that generates a list of assets to precache that is injected into a service worker file.

Assets

• .htaccess - optimized 100/100 in google https://web.dev/measure/ of course when there are no ads ;)
• manifest.json - of course you can use the favicons-webpack-plugin that will generate all possible elements in the manifest

License

This project is open source and available under the MIT License.