Kooba Frontend base project

Gulp + Webpack + Babel + BrowserSync

For Live reloading, Browsersync has been used. For ES6 Transpilation, Babel has been used. For SourceMaps, Gulp & Webpack both have been used. Sass/CSS Workflow.

Setup

• Install Node Version 16.13.1
• Use Npm that comes with Node pre-installed
• Install Gulp globally through npm install -g gulp@next
• Install Webpack globally through npm install -g webpack
• Clone this project
• cd to the cloned project
• Update the remote git repository to the relevant project eg. git remote set-url origin https://[email protected]/koobafe/climate-focus.git
• Install all packages with npm install

Usage

• Build the Project and Serve locally (Development build) - npm run dev. The Development port is 3000. Build directory is /tmp
• Build the Project and Serve locally (Production build) - npm start. The Production port is 8000. Build directory is /dist
• Build the Project without Serving or Watching (Production build) - npm run build. Build directory is /dist

Important Note: Don't run these npm scripts simultaneously.

Appendix

• Tooling - Gulpfile Lives in gulpfile.js and Webpack config files live within webpack folder.
• Source Files - Lives in website/src folder
• Compiled Files for development - Generated into website/tmp folder.
• Compiled Files for production and sharing with backend - Generated into webist/dist folder.

Transpilation

Babel is used with Webpack to transpile modern javascript according to the compatibility outlined in .browserslistrc, and allow for es6 module imports.

By default, the contents of node_modules are excluded from babel transpilation. However, any node packages that use ES6+ will also need to be transpiled. To enable this, add the package name (should match the name used in package.json) to the array in /webpack/nodeModulesToTranspile.js.

If this step is not completed, you'll see an error when attempting a production build that's similar to the following:

gulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: keyword «const»
File: /Users/ronan/Sites/kooba-frontend-base/main.js 

Tools

• Icon Generation - Add SVG icons to website/src/icons. Run npm run icons to add new icons in generated font. Visit styleguide.html to see auto generated fonts.