@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

1. 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.

2. run npx @crasman/create-stage-webpack or yarn create @crasman/stage-webpack to setup new project / update existing project created with studio-project-generator.
3. Go to newly created / updated directory

$3

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

$3

3. Delete package-lock.json / yarn.lock & node_modules
4. Install dependencies
5. 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
6. Delete gulp folder when ready with setup

Setup branch helper

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

[branch-helper]: branch-helper.md