Skip to content

explain flavors in detail #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 176 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ Create [Cycle.js](https://cycle.js.org/) apps with no build configuration.
* [Getting Started](#getting-started) – How to create a new app.
* [Custom Flavors](#flavors) – How to develop and publish new flavors

The project is inspired by [create-react-app](https://github.com/facebookincubator/create-react-app)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we have a special mention for this on the Acknowledgements section, I'll rather keep it one place only.


## Quick Start

```sh
Expand Down Expand Up @@ -37,46 +39,49 @@ $ npm run build

## Principles

* **One dependency:** The first and only dependency needed to create a Cycle.js project, hiding tooling complexity and providing smart defaults. Just update `create-cycle-app` to get selected changes to the core flavors.
* **One dependency:** The only dependency needed to create a Cycle.js project, hiding tooling complexity and providing smart defaults. Just update `create-cycle-app` to get selected changes to the core flavors.

* **Zero Configuration:** There are no configuration files. Configuring both development and production builds is handled for you so you can focus on writing code.
* **Zero Configuration:** No configuration files. Configuring both development and production builds is handled for you. Focus on writing code.

* **Many Flavors:** We like to be together not the same, that’s why create-cycle-app comes with 1 core flavors but allows you to provide your own from any registry such as GitHub or your own.

* **No Lock-In:** Specifically made for beginners and to provide fast bootstrap for new projects, create-cycle-app doesn't have the ambition to be __the__ tool for working with Cycle.js projects. With that in mind, it's easy to leave `create-cycle-app` defaults and follow your own steps, by running `npm run eject`.
* **No Lock-In:** Specifically made for beginners and to provide fast bootstrap for new projects. `create-cycle-app` doesn't have the ambition to be __the__ tool for working with Cycle.js projects. With that in mind, it's easy to leave `create-cycle-app` defaults and follow your own steps, by running `npm run eject`.

## Why Use This?

**If you’re getting started** with Cycle.js, use `create-cycle-app` to automate the build of your app. There is no configuration file, and `cycle-scripts-<flavorName>` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a Cycle.js app.

**If you’re a power user** simply use it as a boilerplate generator, by passing in your own flavor.

**To customise** the build or compile process, you need to first `eject` the dependencies and configurations into the project root folder. Then you can customize from there as usual.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure this fit into the "Why use this" section


## Getting Started

### Installation

Installing globally provides a create-cycle-app command for creating new projects.
Install the module globally and a `create-cycle-app` binary command will be made available for creating new projects.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we could remove some jargon and make it clearer that you will be able to use that command on your terminal perhaps?


```sh
$ npm install --g create-cycle-app
```

**We recommend** to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage. You can use a node version manager(i.e [nodenv](https://github.com/nodenv/nodenv), [nvm](https://github.com/creationix/nvm), [n](https://github.com/tj/n)) to easily switch Node versions among different projects.
**We recommend** using Node >= 6 and npm >= 3 for faster installation speed and better disk usage. You can use a node version manager(i.e [nodenv](https://github.com/nodenv/nodenv), [nvm](https://github.com/creationix/nvm), [n](https://github.com/tj/n)) to easily switch Node versions among different projects.

`sudo n latest` - Install latest Node version
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we suggest to use either nvm or n, but here we offer a specific command to run that imply the user is using n. I guess that suggesting few alternatives for managing node versions is more then enough, going into offering how to install node feels a bit out of scope imho, no?


### Creating an App

To create a new cycle.js app, run:

```
```sh
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

$ create-cycle-app my-awesome-cycle-app
$ cd my-awesome-cycle-app
```

It will create a directory called `my-awesome-cycle-app` inside the current folder.
Inside that directory, it will generate the following initial project structure* and install the required dependencies.
Inside that directory, it will generate the following initial project structure and install the required dependencies.

```
```sh
my-awesome-cycle-app/
├── node_modules/
├── public/
Expand All @@ -89,10 +94,9 @@ my-awesome-cycle-app/
└── package.json
```

_* Generated structure and files may change depending on the flavor being used, The above structure hold true for the core flavor._
_* Generated structure and files may change depending on the flavor being used, The above structure holds true for the core flavor._

No configuration or complicated folder structures, just the files you need to build your cycle app.
Once the installation is done, you can run the following commands from within the project folder:
No configuration or complicated folder structures, just the files you need to build your cycle app. Once the installation is done, you can run the following commands from within the project folder:

### `npm start`

Expand All @@ -111,7 +115,7 @@ Generate a production-ready build content, on the build folder (this folder is g

### `npm run eject`

Copy dependencies and configurations to the project folder, update package.json and remove the dependency on the flavored cycle-scripts.
Copy dependencies and configurations to the project folder, update `package.json` and remove the dependency on the flavored cycle-scripts.

**This is irreversible.**

Expand All @@ -120,41 +124,193 @@ Each flavor represents a pair of programming language and builds tool. All the u

### Core flavor

Create-cycle-app come packed with 1 core flavor:
Create-cycle-app comes pre-packaged with this core flavor:

* [cycle-scripts](https://github.com/cyclejs-community/create-cycle-app/blob/master/packages/cycle-scripts)

### Custom flavour
### Using a custom flavor

Custom flavors allow generating starting projects to fulfil specific needs.
They can be published to npm, or being used locally via the create-cycle-app CLI.
They can be published to npm or a git repo or even be referenced locally (esp. useful when you create your _own_ custom flavor - see below)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


#### How to use custom flavors

##### Providing your own
When creating a project, you can inform which flavor you want to use with the `--flavor` flag:
When creating a project, you can specify which flavor to use with the `--flavor` flag:

```sh
$ create-cycle-app <name> --flavor <flavor>
```
Some examples of how a flavor could be specified:

The flavor will be installed via `npm install` and can therefore reference any flavor resource installable via `npm`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure I get this, what do you wanted to say with "and can therefore reference any flavor resource installable via npm" ?


Some examples of how a flavor can be specified:

*npm name*

```sh
$ create-cycle-app my-app --flavor cycle-scripts-one-fits-all
```
$ create-cycle-app my-app --flavor cycle-scripts-es-webpack

$ create-cycle-app my-app --flavor cycle-scripts-es-webpack@x.y.z
*npm name with specific version*

$ create-cycle-app my-app --flavor ./relative/path/to/cycle-scripts-es-webpack
```sh
$ create-cycle-app my-app --flavor cycle-scripts-one-fits-all@1.1.0
```

*github account/repo*

```sh
$ create-cycle-app my-app --flavor github:my-account/my-cycle-flavor
```

*reference to local file path*

```sh
$ create-cycle-app my-app --flavor ./relative/path/to/my-cycle-flavor
```

##### Flavors:

- Check [available flavors](https://github.com/cyclejs-community/create-cycle-app-flavors)

### Creating a custom flavor
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This part is definitely interesting but I found it a bit unclear atm. Why not focusing on explaining better how to create a flavor and less on lerna technicalities? (We use lerna for managing this mono-repo and the flavors mono-repo, but i'm not too sure is of any relevance for a flavor creator) ..apart the sparse checkout mention, good one!


Copy an existing flavor to a local folder and reference via the local file path.

Example: Extend default `cycle-scripts` flavor

When you create a new project, the default `cycle-scripts` is installed in `node_modules` of your project. You can simply copy this package and work from there, using it as a simple base.

```sh
$ cp node_modules/cycle-scripts ./cycle-flavors
```

The default flavor package has the following structure:

```
/scripts
/configs
.babelrc
build.js
eject.js
init.js
start.js
test.js

/template
/public
/src
index.js
package.json
Readme.md
```

## Single flavor from lerna project

If you want to use a [lerna](https://github.com/lerna/lerna) repo with multiple packages, you can make a [sparse checkout](https://gist.github.com/sumardi/5559896) of the specific package you want to use as the base.

We recommend you use [one-fits-all](https://github.com/cyclejs-community/create-cycle-app-flavors/tree/master/packages/cycle-scripts-one-fits-all) as a baseline (note: it uses [webpack-blocks](https://github.com/andywer/webpack-blocks))
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would try to keep as a basic suggestion the core flavor that come with cca, we could definitely point out to one-fits-all as an example for a more articulated flavor perhapsh? This simply because by doing so will make the readme a bit more future-proof, let's say one-fit-all will become core, or the core flavor will evolve...

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a bit long on flavors, creating your own etc. Perhaps add a Wiki instead with more detailed recipes ;)


```sh
$ pwd
~/cycle-projects

$ mkdir cycle-flavors && cd cycle-flavors
$ git init <repo>
$ cd <repo>
$ git remote add origin <url>
$ git config core.sparsecheckout true
$ echo "packages/<flavor-package>" >> .git/info/sparse-checkout
$ git pull --depth=1 origin master
$ cd ..
```

## Lerna: using a shell script

To facilitate using lerna flavors from git you can store this recipe as a shell script, like this:

```sh
#!/bin/sh

# $1 repo name
# $2 git repo url
# $3 flavor package name (lerna)
function cycle-flavor() {
$DEFAULT_FLAVOR_REPO=my-flavor
$DEFAULT_FLAVOR_GIT_URL=https://github.com/cyclejs-community/create-cycle-app-flavors.git
$DEFAULT_FLAVOR_PACKAGE=cycle-scripts-one-fits-all

FL_NAME=${1:-DEFAULT_FLAVOR_REPO}
FL_PACKAGE=${2:-DEFAULT_FLAVOR_PACKAGE}
FL_GIT_URL=${3:-DEFAULT_FLAVOR_GIT_URL}

git init $FL_NAME && cd $FL_NAME
git remote add origin $FL_GIT_URL
$ git config core.sparsecheckout true
$ echo "packages/$FL_PACKAGE" >> .git/info/sparse-checkout
$ git pull --depth=1 origin master
$ cd ..
}
```

## Using shell script

All defaults

```sh
$ cycle-flavor [my-flavor] [cycle-scripts-one-fits-all][https://github.com/cyclejs-community/create-cycle-app-flavors.git]
```

Specify name of local repo to create as flavor "container"

```sh
$ cycle-flavor my-new-flavor [cycle-scripts-one-fits-all][https://github.com/cyclejs-community/create-cycle-app-flavors.git]
```

Specify local repo and which remote lerna package to use as base

```sh
$ cycle-flavor my-sweet-flavor cycle-scripts-ts-browserify[https://github.com/cyclejs-community/create-cycle-app-flavors.git]
```

Specify local repo, remote lerna package and git location

```sh
$ cycle-flavor my-sweet-flavor cycle-scripts-ts-browserify https://github.com/my-account/my-cycle-flavors.git
```

Now from `~/cycle-projects` reference your local custom flavor of choice :)

```sh
$ create-cycle-app my-app --flavor ./cycle-flavors/flavor-package
```

## Multiple local lerna flavors

`create-cycle-app` uses [lerna](https://github.com/lerna/lerna) a useful tool suite to manage multiple related repos/projects

If you want to go this way, simply clone `create-cycle-app-flavors`

```sh
$ git clone https://github.com/cyclejs-community/create-cycle-app-flavors
```

Then remove any packages you want to discard and modify the packages you want to use
to suit you needs. Please read the lerna guide and use the lerna wizard and/or modify `lerna.json` to match your packages configuration.

Alternatively create a brand new lerna project using the lerna CLI and go from there...

## Publishing a local flavor

When you have tested your local custom flavor and are happy with it, you can publish it to a git repo or perhaps to npm to make it accessible for the Cycle.js community. You can even make a "shout-out" on the Gitter channel, notifying the community about your creation for the benefit of all.

## Contributing

We'd love to have your help on `create-cycle-app`. See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started.

Please notice that this project is a *lerna* project with sub-projects under `/packages`. These packages are published separately to npm.

## Acknowledgements

A simple thank you goes a long way. That's why we would like to thank the [create-react-app](https://github.com/facebookincubator/create-react-app) team: you have been a fantastic inspiration and a great example for this project.
Expand Down