@crasman/create-stage-webpack

@crasman/create-stage-webpack

CRA (Create React App) inspired setup script for setting up project that supports React and Vue frameworks out of the box with Stage / Studio environments in mind.

studio-project-generator vs @crasman/stage-webpack: differences / breaking changes

• @crasman/stage-webpack only bundles assets that are referenced within files (e.g. icons) and hashes the output filename for better long time cache. If you need to reference some icons / images from Stage, you need to place these files inside the static folder that is uploaded as is, without optimization
• Webpack favors the ES6 import / export because that allows tree-shaking (getting rid of code that isn't referenced). module.exports doesn't break anything but for more efficient bundling, it's better to use import & export
• Be prepared for lots of CSS / SCSS related lint errors / warnings. Linter changed from sass-lint to stylelint to allow fix operation during build and with editor's stylelint plugin. fix and lint scripts are added to package.json to help this transition.

Setup project

• Prepare to answers to the following questions, which will be asked while the new project is being setup:

  • Studio ID
  • Folder ID of the Studio folder, that we will be uploading in to
  • Path to that folder on Studio (for example: web/v1/)
  • Site's admin url
  • Site's public url
  • Project ID (Used for compiled js and css file names)
  • Indentation style: 2 or 4 spaces, or tabs.

These settings (except indentation style) can be later found and edited at stage-webpack.config.js if any of these change or haven't been decided yet.

• run npx @crasman/create-stage-webpack <target-folder> or yarn create @crasman/stage-webpack <target-folder> to setup new project / update existing project created with studio-project-generator.
• Go to newly created / updated directory

If new project

• Install dependencies
• Setup git
• Read project's README.md for available commands and useful editor plugins

If updating studio-project-generator project

• Delete package-lock.json / yarn.lock & node_modules
• Install dependencies
• Try to run the lint / fix commands defined in the project's README.md. Prepare for lots of CSS related errors as the linter has changed from sass-lint to stylelint
• Delete gulp folder when ready with setup

Setup branch helper

See branch-helper.md to learn how to add branch support to Stage.