node package manager

cycle-scripts-one-fits-all

one-fits-all flavour

Cycle-app flavor.

Language

ES6 or Typescript, uses the Typescript compiler for both.

How does this flavor work

My goal is to create a flavor where you don't have to eject if you want to customize the config. This is now possible with the 3.0.0 update. The template will create a webpack.config.js inside your app folder that defines the entry points of the app. You can add to that config and it will be merged with the config defined in this flavor.

I strongly recommend wepack-blocks as they help a lot in making webpack easy.

Enable HMR

If you have a new scaffold you won't have to do anything. When migration from an earlier version, you will have to update the flavor and adjust your index.ts like this one

Migrating

The 3.0.0 update is a breaking change, you will need to update manually:

  1. Create a new bare scaffold using create-cycle-app tmp --flavor cycle-scripts-one-fits-all
  2. Copy over your source and tests.
  3. (optional) Adjust the entry points in the webpack.config.js
  4. Open the old package.json and the new one (that was created by create-cycle-app) and copy over the dependencies of your app manually. It won't work if you replace the config alltogether!
  5. Copy over .git and all other files you want to keep
  6. Check if everything is working as it should.
  7. Delete your old folder and rename tmp to your app name.
  8. Enjoy your new flavor :)

Bundler

Webpack is configured using webpack-blocks

Scripts

  • npm start: Start development server listening on port 8000
  • npm test: Run the default test tool
  • npm run build: Generate a production-ready build content, on the build folder (this folder is gitignored)
  • npm run eject: Copy flavor's dependencies and configurations to the project folder, update package.json and remove the dependency on the flavored cycle-scripts. This is irreversible.
  • npm run clean: Delete all the files and folders that were generated by the other commands (build, start and test)

Boilerplate:

The flavor generate the following file structure:

my-awesome-cycle-app/
├── node_modules/
├── public/
│   ├── favicon.png
│   └── favicon.ico
├── src/
│   ├── css
│   │   └── styles.scss
│   ├── app.tsx
│   ├── app.test.js
│   └── index.ts
├── .gitignore
├── package.json
├── tsconfig.json
├── tslint.json
├── webpack.config.js
└── index.ejs

Config files

  • webpack.config.js (Added to config/ after running the eject script)
  • webpack.config.test.js (Added to config/ after running the eject script)