Git Product home page Git Product logo

create-cycle-app's Introduction

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.

create-cycle-app's People

Contributors

canfeit avatar cesarfigueroa avatar geovanisouza92 avatar greenkeeper[bot] avatar jvanbruegge avatar mimoning avatar nickbalestra avatar stevealee avatar widdershin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

create-cycle-app's Issues

cycle-scripts v2

This to quickly resume what to add to the next iteration of cycle-scripts:

BASICS:

  • webpack2
  • preset-env
  • uglify / minification
  • HtmlWebpackPlugin
  • JSX -> ProvidePlugin({snabb: 'snabbdom-jsx'})
  • cycle-dev-utils modules
  • inquirer -> for eject confirmation
  • inquirer -> for init (choose js or ts, choose streamlib -> rxjs, xstream, most)
  • adhoc templates for javascript
  • adhoc templates for typescript
  • adhoc webpack configs for javascript
  • adhoc webpack configs for typescript
  • cleaner build assets output (js/ css/ images/)
  • eslint/prettier
  • CSS Autoprefixing

Broken Build with @cycle/dom 15.0.0-rc.1

Code to reproduce the issue:

  1. Clean creation as of 21st Jan 2017
  2. create-cycle-app my-cycle-app
    ES6 (babel) + Webpack
    XStream, tailored for Cycle.js
  3. cd my-cycle-app
  4. npm start

Expected behavior:

Build completed in [X]s

App is running at http://localhost:8000

webpack: bundle is now VALID.

Actual behavior:

ERROR in ./~/@cycle/dom/lib/MainDOMSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/MainDOMSource.js 2:14-45

ERROR in ./~/@cycle/dom/lib/HTMLSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/HTMLSource.js 3:14-45

ERROR in ./~/@cycle/dom/lib/mockDOMSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/mockDOMSource.js 3:14-45

ERROR in ./~/@cycle/dom/lib/DocumentDOMSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/DocumentDOMSource.js 3:14-45

ERROR in ./~/@cycle/dom/lib/BodyDOMSource.js
Module not found: Error: Cannot resolve module '@cycle/run/lib/adapt' in /Users/jon/Documents/git/craftship/tech-task-cycle/node_modules/@cycle/dom/lib
 @ ./~/@cycle/dom/lib/BodyDOMSource.js 3:14-45

Versions of packages used:

  "dependencies": {
    "@cycle/dom": "^15.0.0-rc.1",
    "@cycle/xstream-run": "^4.2.0",
    "xstream": "^9.3.0"
  },

Looks like changes are afoot (cyclejs/cyclejs@b8a7c36) as the import referred to is not on master yet, if anyone else hits this issue just now I used:

  1. npm run take-off-training-wheels
  2. Edit package.json to use "@cycle/dom": "14.3.0"
  3. npm i
  4. npm start

Think I literally have just caught this stuff as v15-rc.1 is in flux, although does ask the question whether the create-cycle-app should lock down major versions explicitly when you init the project and let only major and minors through to stop this happening going forward.

Additionally could setup nightly builds in CI of the project with relevant tests that ensure the app still integrates correctly.

Thoughts?

Improve readme

Improve readme documentation making sure it reflect latest 1.0

Rethinking scripts post take-off-training-wheels

While working ont he es6-webpack flavour I noticed that would be nice to be able to have a cleaner post take-off-training-wheels.js version of the scripts.

At the moment we simply move them in the .scripts folder and we reference them wihin the package.json scripts field.

Some of them could be simply rewritten as cli cmds within the npm script, together with some files being created whenever needed (i.e: .babelrc and webpack.config.js).

Once we have all the 4 basics flavours in place we can perhaps start thinking on how to improve this part of the experience.

Rethinking CCA

@Widdershin @geovanisouza92 @TylorS

I think we should somehow rethink some parts of create cycle app. I'm referring to core flavors.
Imho we try to accomodate to many options, and I think that if the aim of create-cycle-app is allowing people to get up and start quickly with cycle then it shouldn't make the user think about which xlib to use, which bundle/language ecc.. but simply kickstart him. Everything else, like special cases, configuration, ecc could be done with seperated flavors, as that is what are for.

While it seemed a nice idea when we began, Its way harder to mantain as we move along, it is also harder to add features, tests ecc, as if you add something for one core flavor the same should be applied to all as someone expect core-flavors to offer the same functionalities.
I would suggest that we move toward a single core-flavor, no streamLib options.

  • I would go with a es flavor (no ts, as this add complexity for people starting with cycle as a js fw imho), in this direction webpack-es6 could be a nice candidate to start.
  • It should have CSS, proper tests and module-loading properly done, it should be good enough for people to use it in production.
  • we should maintain and keep the core flavor supported as much as possible, create-react-app is a terrific example of how we should do it and try to push forward with it.

This are just some of my initial thoughts on the matter, would love to hear what you think in this direction...

GH urls

Fix various url scattered throughout the mono-repo to point to cyclejs-community/create-cycle-app (example).

Contributors files

As discussed on #48

Add contributors file with a script to autogenerate it (similar to how standard do)

Cursor navigation not working with MYSYS shell

Code to reproduce the issue:
when running
create-cycle-app my-awesome-cycle-app
in WIndows Msys bash shell that comes with GitHub Desktop App (atually Msys from MinGW that comes with Git for Windows) the arrow keys and color do not work

Expected behavior:
Arrow keys work and highlight colour

Actual behavior:
No colour and arrow keys do not function

Versions of packages used:

Latest

This is really very low priority as running a Cmd in the default Win10 terminal is fine. I'm just recording so you have a recrd. No doubt other combinations of temrinal / shell will also fail,

Using ES6 on tests

Code to reproduce the issue:
Use import (or any other ES6 syntax) on app.test.js

Expected behavior:
It runs the tests

Actual behavior:
It fails due mocha is not configured to support ES6.

Versions of packages used:
N/A

Reported on #13

Add CSS to core flavours

Any real app will use CSS (or something that compiles to it) for styling, not just code managed classes used for DOM event hooks or component isolation. However the built in flavors have no CSS at all.

A minimum would be to simply provide a static styles.css refed from index.html

A more useful example might be to use webpack loaders - but there are many options even with the basics.

Webpack build fails with Typescript 2.1

Code to reproduce the issue:
$ create-cycle-app my-app with TypeScript + Webpack
$ npm i typescript --save-dev (installs typescript 2.1)
$ npm start

Expected behavior:
No errors ;-)

Actual behavior:
Error message with partial trace:

PS D:\Projects\my-app> npm start

> [email protected] start D:\Projects\my-app
> cycle-scripts start

  build [========            ] 40%TypeError: Cannot read property 'exclude' of undefined
    at applyDefaults (D:\Projects\my-app\node_modules\awesome-typescript-loader\src\instance.ts:266:72)

Versions of packages used:
create-cycle-app 1.0.0
typescript 2.1

I can confirm that this does not occur with typescript 2.0.10.

Error using create-cycle-app on mac: TypeError: installPackage.indexOf is not a function

Code to reproduce the issue:
$ sudo npm i -g create-cycle-app
$ create-cycle-app my-awesome-app

Expected behavior:
App bootstrapped inside my-awesome-app directory

Actual behavior:
Error:

Creating a new Cycle.js app in /Users/develop/dev/cycle/my-awesome-app.

/usr/local/lib/node_modules/create-cycle-app/src/getPackageName.js:7
  } else if (~installPackage.indexOf('@')) {
                             ^

TypeError: installPackage.indexOf is not a function
    at getPackageName (/usr/local/lib/node_modules/create-cycle-app/src/getPackageName.js:7:30)
    at installScripts (/usr/local/lib/node_modules/create-cycle-app/src/installScripts.js:15:23)
    at preparePackageJson (/usr/local/lib/node_modules/create-cycle-app/src/createApp.js:13:5)
    at preparePackageJson (/usr/local/lib/node_modules/create-cycle-app/src/preparePackageJson.js:21:3)
    at createApp (/usr/local/lib/node_modules/create-cycle-app/src/createApp.js:12:3)
    at Object.<anonymous> (/usr/local/lib/node_modules/create-cycle-app/index.js:42:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

Versions of packages used:
Macbook Pro
Node: v6.9.5
npm: 3.10.10
create-cycle-app: 3.0.6

TypeScript flavours giving error on npm start

Code to reproduce the issue:

Ok so did some more testing:
On mac, with the same node and npm version it works fine. However when in windows (10) it gives the TypeScript error.

npm install -g create-cycle-app
create-cycle-app test-typescript

Select Typescript + Browserify and Xstream

cd test-typescript
npm start

Expected behavior:

Should start normally.

Actual behavior:

Getting Typescript error:

TypeScript error: node_modules/@cycle/dom/lib/isolateModule.d.ts(6,35): Error TS2304: Cannot find name 'Map'.

Versions of packages used:

  • node v6.9.0
  • npm 3.10.8

Discovery flavors on npm registry

  • Implement further the flavor discovery logic by relying on npm as a registry.
  • Use the keyword create-cycle-app-flavor to discover community flavors.
  • Keep coreFlavors.json for the core flavors.

Continuos integration

We could perhapsh hook in travis or similar, so that we run at least the test against each PR, what you are your toughts in this direction?

Add --initFlavor

Would be nice if the create-cycle-app CLI could have a command to init an empty flavor structure for the ones who want to start creating their own flavors. ie:

$ create-cycle-app --initFlavor path/of/the/newFlavor

@geovanisouza92 what you think?

cycle-scripts-ts-webpack fails on Windows 10 bash

Code to reproduce the issue:
create-cycle-app cycle-ts --flavor cycle-scripts-ts-webpack

Expected behavior:
Successfully finish initialization

Actual behavior:

/mnt/c/Users/brunjick/Code/cycle-ts/node_modules/cycle-scripts-ts-webpack/scripts/init.js:63
      throw new Error('Unsupported stream library: ' + streamLib)
      ^

Error: Unsupported stream library: false
    at replacements (/mnt/c/Users/brunjick/Code/cycle-ts/node_modules/cycle-scripts-ts-webpack/scripts/ini
t.js:63:13)
    at module.exports (/mnt/c/Users/brunjick/Code/cycle-ts/node_modules/cycle-scripts-ts-webpack/scripts/i
nit.js:166:14)
    at ChildProcess.<anonymous> (/usr/lib/node_modules/create-cycle-app/src/installScripts.js:48:5)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:192:7)
    at maybeClose (internal/child_process.js:890:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

Versions of packages used:
0.3.2

Is the formatCodeOptions section in tsconfig.json valid?

The tsconfig.json contains a formatCodeOptions
https://github.com/cyclejs-community/create-cycle-app/blob/master/cycle-scripts-ts-webpack/template/tsconfig.json#L13-L16

But that is not in the offical TS docs or schema?
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
http://json.schemastore.org/tsconfig

It seems therefore to be invalid.

FYI I noticed this as Visual Studio Code didn't provide any intellisense for the secction.

Replace northbrook

There are some bugs with northbrook, like:

  • Sometimes it doesn't detect changes made on a single package, because it just look for changes from the latest tag, instead of "latest tag for package X"
  • If you type the wrong password on npm release, causing an error, it assumes that the release was made (it should be transactional)

Some options are:

  • Lerna
  • Raw scripts

Using ES6 on tests with the es6-browserify core flavor bug

Code to reproduce the issue:
Use import (or any other ES6 syntax) on app.test.js

Expected behavior:
It runs the tests

Actual behavior:
It fails due mocha is not configured to support ES6.

Versions of packages used:
N/A

Reported on #13
Was fixed for the es6-webpack core flavor in #15 similar solution need to be applied to es6-browserify pack

An in-range update of validate-commit-msg is breaking the build 🚨

Version 2.11.0 of validate-commit-msg just got published.

Branch Build failing 🚨
Dependency validate-commit-msg
Current Version 2.10.1
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As validate-commit-msg is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪


Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details
Release Notes v2.11.0

2.11.0 (2017-01-26)

Features

  • lib: Add support for limiting allowed scopes (e05c6271)
Commits

The new version differs by 6 commits .

  • 815bc77 Merge pull request #65 from Garbee/garbee/filter-scopes
  • 3149921 fix(scopes,test): Added test for allowing any scope value.
  • 3d21903 refactor(scopes): Update scopes feature per PR feedback. config property now . Validation moved into its own function. Fat arrow removed
  • fde2abb docs(contributors): Add myself to contributors
  • e05c627 feat(lib): Add support for limiting allowed scopes
  • 04facc4 docs(contributors): add @travi (#64)

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

New flavor

Hi! Just opening an issue to say that I've created a new flavor:

https://github.com/Widdershin/cycle-scripts-widdershin

It's based off of es-browserify, but has an eslint config for semicolons, a separate test directory, includes babel-plugin-transform-object-rest-spread and a few more things.

If you like, I would love to have it on the list in the README.

Thanks!

Contribution guidelines

Add contributions docs explaining how to contribute and how to create community flavors that are discoverable by create-cycle-app

test directory is in .gitignore

For the browserify templates, both of them have the test directory present in the .gitignore.

This seems incorrect to me, as users will write tests that won't be committed. This is also silent, so easy to not notice.

Was there a reason or shall we just fix it?

fails to run at all with crazy const error

node version = 6.5.0
create-cycle-app version = 3.0.6 but npm page says lates is 3.0.5 ???

I did this

npm install -g create-cycle-app 
npm create-cycle-app my-app --flavor cycle-scripts-one-fits-all

I got

C:\projects\spikes>C:\Users\steve\AppData\Roaming\npm\node_modules\create-cycle-app\index.js:4
const path = require('path')
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Flavor discover method

I think that at some point we should aim to bring the flavor-discovery mechanism within the create-cycle-app scope and not dependent on external gists? Would make it easier to maintain.

Any thoughts?

How about an example for a component or driver?

I've just been exploring how to create and publish a driver / component as a module. I want to use typescript but enable the usual commons/ES6 import options form JavaScript but expose typings for TS use and intellisense in tools like VS Code. I don't think they would ever need to be uses as global scripts so AMD no needed.

This appears to be a non trivial config and rummaging around the cycles code is making my head spin as I'm new to TS.

So this seems like a perfect candidate flavour! :) 

Anyone fancy it?

streamLib

I noticed that now that we don't have the streamLib choosing step anymore for non-core flavors, we cannot use the core flavors with the --flavor flag.

@geovanisouza92 , although maybe this is a non-issue it made me think that perhaps flavors should be the ones specifying if a streamLib choosing step is needed (if streamLibs supported > 1). What will you suggest?

A few questions on project development

This is a great tool! Keeping config out of sight is great for beginners. But like all 'magic' I worry about it as I'm likely to have to understand/maintain it at some point. Mind you magic is a lot less of a problem with build tools than live code (I chose cyclejs over the excellent MobX as I felt that had a bit too much magic, I might review that - heh).

So a few questions came up as someone new to this and wanting to try it out on a new project, partly for my own interest and partly to support our great community.

  1. Does the hidden config ever change? Do you update dependency versions for us? If so when? When we update this project only? That seems to be the case as I see no live updating.

  2. Are there any advantages to keeping the training wheels on for production project with expected long lifetime? Or is it best to eject and treat as a starter boilerplate The current examples simply create a couple of config files which is not at all complex to manage and being able to shrink wrap dependencies etc is important for public code

  3. How do we add new features such as linting or css loaders to our projects? (reminds me a template CSS file might be a good addition to the flavours). The obvious answer is we simply edit the scripts to alter the configs. But is there more we need to do?

If it makes sense to keep the wheels on for a production project then we'd need a list of the changes per release.

I hope this is helpful

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.