bungambohlah / dicoding-webpack-webcomponent-food

Simple food recipes app using Webpack 5 (+ Plugins) + Tailwindcss + HTML 5 Web Component

🍚🍰 Simple Food Recipes

Simple food recipes app that provide food recipes information from TheMealDB using sensible webpack 5 boilerplate using Babel, PostCSS and Sass.

Table of Contents

• 🍚🍰 Simple Food Recipes
  • Table of Contents
  • Installation
  • Usage
    • Development server
    • Production build
  • Features
  • Dependencies
    • webpack
    • Babel
    • Loaders
    • Plugins
    • Linters
  • Link
  • Author
  • License

Installation

Clone this repo and npm install.

npm i

Usage

Development server

npm start

You can view the development server at localhost:3005.

Production build

npm run build

Note: Install http-server globally to deploy a simple server.

npm i -g http-server

You can view the deploy by creating a server in dist.

cd dist && http-server

Features

• webpack
• Babel
• Sass
• PostCSS
• TheMealDB

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/production configuration
• cross-env - Cross platform configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • sass - Node Sass
• postcss-loader - Process CSS with PostCSS
  • postcss-preset-env - Sensible defaults for PostCSS
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• css-minimizer-webpack-plugin - Optimize and minimize CSS assets
• terser-webpack-plugin - Minify/minimize Javascript
• imagemin-webpack-plugin - Compress/minimize all images (jp(e)g, png, gif, and svg) files
• mangle-css-class-webpack-plugin - Minimize and obfuscates the class name (include tailwindcss) in the production mode

Linters

• eslint - Enforce styleguide across application
• eslint-config-prettier - Implement prettier rules
  • • prettier - Dependency for prettier-webpack-plugin plugin
• eslint-import-resolver-webpack - Throw exceptions for import/export in webpack

Link

Visit at foodrecipes.afif.dev

Author

• Afif Abdillah Jusuf

Hello there 👋🏻, my name is Afif Abdillah Jusuf and I'm a Full-Stack Developer.

I'm currently working as a Software Engineer.

Graduated from Politeknik Elektronika Negeri Surabaya as Associate Degree in Informatics Engineering.

Nice to meet you.

Visit my personal site at afif.dev.

License

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