• Stars
    star
    238
  • Rank 169,275 (Top 4 %)
  • Language
    JavaScript
  • License
    ISC License
  • Created about 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create Cycle.js apps with no build configuration.

Create Cycle App

Create Cycle.js apps with no build configuration.

Quick Start

$ npm install -g create-cycle-app
$ create-cycle-app my-awesome-cycle-app

Once your app has been created a success message with further info will be displayed:

create-cycle-app-success

Then, simply follow the suggestion in your terminal and type:

$ cd my-awesome-cycle-app/
$ npm start

โ€™npm-startโ€™

Open your browser at http://localhost:8000 to see your app.

Once youโ€™re ready to deploy to production, create a minified bundle with

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

  • Zero Configuration: There are no configuration files. Configuring both development and production builds is handled for you so you can 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.

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.

Getting Started

Installation

Installing globally provides a create-cycle-app command for creating new projects.

$ 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, nvm, n) to easily switch Node versions among different projects.

Creating an App

To create a new cycle.js app, run:

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

my-awesome-cycle-app/
โ”œโ”€โ”€ node_modules/
โ”œโ”€โ”€ public/
โ”‚   โ”œโ”€โ”€ favicon.ico
โ”‚   โ””โ”€โ”€ index.html
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ app.js
โ”‚   โ”œโ”€โ”€ app.test.js
โ”‚   โ””โ”€โ”€ index.js
โ””โ”€โ”€ package.json

* Generated structure and files may change depending on the flavor being used, The above structure hold 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:

npm start

Runs the app in development mode by starting the development server.

Server will be listening on port 8000

npm test

Run the default test tool.

(Some flavors could create a test folder, but this folder is gitignored)

npm run build

Generate a production-ready build content, on the build folder (this folder is gitignored)

npm run eject

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

This is irreversible.

Flavors

Each flavor represents a pair of programming language and builds tool. All the underlying dependencies and configuration are hidden behind the flavor. All flavors must adhere to the same basic structure and commands. Please make sure to check a specific flavor documentation for more details.

Core flavor

Create-cycle-app come packed with 1 core flavor:

Custom flavour

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.

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:

$ create-cycle-app <name> --flavor <flavor>

Some examples of how a flavor could be specified:

$ create-cycle-app my-app --flavor cycle-scripts-es-webpack

$ create-cycle-app my-app --flavor [email protected]

$ create-cycle-app my-app --flavor ./relative/path/to/cycle-scripts-es-webpack
Flavors:

Contributing

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

Acknowledgements

A simple thank you goes a long way. That's why we would like to thank the create-react-app team: you have been a fantastic inspiration and a great example for this project. We would also like to thank the standard project for their update-authors script.

Alternatives

Create-cycle-app doesn't have the ambition to be the tool for working with Cycle.js projects. You might want to explore alternatives. Check awesome-cycle for a list of boilerplates.

More Repositories

1

awesome-cyclejs

A curated list of awesome Cycle.js resources
826
star
2

redux-cycles

Bring functional reactive programming to Redux using Cycle.js
JavaScript
745
star
3

cyclic-router

Router Driver built for Cycle.js
JavaScript
109
star
4

cycle-android

A Cycle.js port for Android
Java
88
star
5

one-fits-all

The one-fits-all flavor for create-cycle-app
JavaScript
34
star
6

cycle-canvas

A canvas driver for Cycle.js
JavaScript
33
star
7

typescript-starter-cycle

An opinionated starter for Cycle.js projects powered by TypeScript.
TypeScript
33
star
8

xstream-boilerplate

DEPRECATED! use create-cycle-app instead
JavaScript
27
star
9

README

Cycle.js Community README, code of conduct and introductions.
JavaScript
24
star
10

create-cycle-app-flavors

JavaScript
17
star
11

cyclejs-sortable

Makes all children of a selected component sortable
TypeScript
17
star
12

cyclejs-utils

A few helper functions for dealing with sinks
TypeScript
15
star
13

component-combinators

Component model for cyclejs
CSS
13
star
14

cycle-idb

A cycle driver for IndexedDB.
JavaScript
13
star
15

cycle-remote-data

A Cycle.js driver for elegantly loading data
TypeScript
12
star
16

boids

Boids in Cycle.js (bird flocking simulator)
JavaScript
12
star
17

cyclejs-modal

An easy way to open custom modals in a cyclejs app
TypeScript
12
star
18

cycle-keyboard

A keyboard driver for cycle.js
TypeScript
9
star
19

learn-to-cycle

A book on @cyclejs
9
star
20

cycle-mouse-driver

Handles mouse events on the document in Cycle.js applications
JavaScript
9
star
21

built-with-cycle

A website to showcase the cool projects built with Cycle.js
JavaScript
9
star
22

cycle-webworker

A simple webworker driver for Cycle.js
TypeScript
8
star
23

cycle-regl

A Cycle.js driver for regl, a declarative and functional interface to WebGL
TypeScript
6
star
24

cycle-delayed-driver

Create a driver in the future as a response to a specific event
JavaScript
5
star
25

cycle-svg-pan-and-zoom

A Google Maps style SVG pan and zoom component for Cycle.js
JavaScript
5
star
26

xstream-marbles

Interactive marble diagrams of xstream Streams
TypeScript
5
star
27

cycle-serverless

A driver for using cyclejs and xstream in serverless FaaS environments (Azure Functions)
JavaScript
2
star
28

utilities

A collection of small helpful scripts related to Cycle.js
PHP
1
star
29

cycle-classic-dom

A tiny helper library for working with classic JS DOM libraries in Cycle.js
TypeScript
1
star