cozy / create-cozy-app

A CLI to bootstrap a "zero-configuration" application for the Cozy V3 platform

Create Cozy App

Start quickly your Cozy application

What's create-cozy-app?

create-cozy-app is a command line tool that creates a skeleton of an application for Cozy, using Cozy libraries.

This tool can be run as an installed CLI or by using yarn create, see below for more information.

By default, create-cozy-app will use the cozy-scripts scripts bundle to build your app based on React.

You can find a complete tutorial about creating a Cozy application using create-cozy-app in the official documentation (docs.cozy.io).

Requirements

• NodeJS version 16+
• Yarn: a NodeJS package manager, like npm;
• a running Cozy development environment

Bootstrap an application

You can use create-cozy-app without installing it globally using yarn create (yarn create documentation):

yarn create cozy-app mycozyapp

You can also install the package globally.

yarn global add create-cozy-app
create-cozy-app mycozyapp

⚠️ By using a locally installed CLI, you will have to update it regularly to keep the app template up to date. It is why we recommend to use directly yarn create which will always uses the latest version of the CLI.

It will

• download dependencies (it may take a while, you can go grab a coffee)
• ask you a few questions
• then create an application skeleton inside mycozyapp.

Start developing

ℹ️ See this tutorial for more information on how to develop a cozy-app. Below, you'll find just the essential.

You can start developing with:

cd mycozyapp
yarn start

This starts a webpack-dev-server that continuously builds the application into the build folder.

If not already started, you should start a cozy-stack serving this folder:

touch ~/cozy.yaml # You can edit this file to configure the stack
docker run -ti --rm -p 8080:8080 -p 5984:5984 -p 8025:8025 -v (pwd)/build:/data/cozy-app/mycozyapp -v ~/cozy.yaml:/etc/cozy/cozy.yaml cozy/cozy-app-dev

You app should now be available at http://mycozyapp.cozy.tools:8080.

Options

--scripts-source (useful for hacking)

You can pass a custom scripts package using the optional --scripts-source option, it can be one of:

• a relative local path to a tarball (fileRel: prefix): fileRel:./a-folder/my-cozy-scripts.tar.gz
• an absolute local path to a tarball (fileAbs: prefix): fileAbs:/root/my-cozy-scripts.tar.gz
• an URL to a tarball (url: prefix): url:https://myurl.com/my-cozy-scripts.tar.gz
• a specific npm version (version: prefix): version:0.1.5
• a specific git commit/branch with name provided after the '#' (git: prefix): git://github.com/cozy/cozy-scripts.git#master

--verbose

Using this options, create-cozy-app will be run in a more verbose way, useful for debugging or understanding what the script does.

Community

What's Cozy?

Cozy is a platform that brings all your web services in the same private space. With it, your webapps and your devices can share data easily, providing you with a new experience. You can install Cozy on your own hardware where no one's tracking you.

Get in touch

You can reach the Cozy Community by:

• Chatting with us on IRC #cozycloud on Libera.Chat
• Posting on our Forum
• Posting issues on the Github repos
• Say Hi! on Twitter

License

create-cozy-app is distributed under the MIT license.

CCA logo by @CPatchane.

create-cozy-app's Issues

Backporting features

• Checking locales (en has same keys as fr)

See banks:scripts/check-locales.sh

• Checking locales (checking for absent keys in locale files, used from code)

See cozy/cozy-banks@4b81a25#diff-f8e88e0eb953841480bf80a02dc96bf0

• Jest.setup to throw on console.{warning,error}

See banks:test/jest.setup.js

Do not override manifest keys if they already exist

If no manifest key is present in src/locales/{fr,en}.json, we should
not end up with empty locales in the manifest.webapp.

https://mattermost.cozycloud.cc/cozycloud/pl/bibmah3uridu3fbj979u1ef5aw

https://github.com/cozy/create-cozy-app/blob/master/packages/cozy-scripts/config/webpack.config.manifest.js#L38

Standard chez Cozy pour le linter et le formattage de code Javascript

J'étais entrain de faire le changement des connecteurs pour mieux utiliser les standards Cozy. Mais finalement la discussion pour utiliser soit Prettier soit StandardJS n'a jamais été terminé et jamais documenté.

Questions

• Quelle standard utilisons nous chez Cozy ? StandardJS ou Prettier.
• Quelle sont les inconvénients et les avantages des outils ?

Situations

Les projets qui utilise StandardJS:

Tous avant le passage à Prettier.
Store, Bar, Settings, Santé, Bank.

Les projets qui utilise Prettier:

StandardJS

JavaScript style guide, linter, and formatter

Avantages

Inconvénients

Prettier

An opinionated code formatter

Avantages

Inconvénients

Tâche

Lister ici les différentes tâches à effectuer.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop renovations until it is fixed.

Configuration file: packages/cozy-scripts/package.json
Error type: Cannot parse package.json
Message: This package.json contains invalid JSON and cannot be parsed. Please fix it, or add it to your "ignorePaths" array in your renovate config so that Renovate can continue.

Ne pas supprimer le dossier build lors d'un clean

Au niveau de docker, si on supprime le dossier il faut obligatoirement relancer le docker.

test are in a ducks folder

A ducks folder encapsulate the test directory.

I think it is a typo.

Using `bail: true` makes watch process terminate

bail
Report the first error as a hard error instead of tolerating it.

Using bail: true closes the watch process if there is an error. I would expect a watcher to continue watching if there is a problem otherwise it is very inconvenient if you are trying to remove several errors and have to restart the watcher every time.

I would use bail: false in cozy-scripts/scripts/watch.js

Tests failing on master on my machine

Steps to reproduce

git clone [email protected]:cozy/create-cozy-app.git
cd create-cozy-app
yarn
yarn test

Here is the result

Test Suites: 1 failed, 1 total
Tests:       16 failed, 16 total

It is always the same kind of error.

  ● App from cozy-scripts › should run webpack.watch correctly with watch script

    Cannot find module '/private/tmp/create-cozy-app/.tmp_test/test-app/node_modules/cozy-scripts/scripts/watch.js' from 'scripts.spec.js'


  ● App from cozy-scripts › should correctly use the webpack-merge strategy if a __mergeStrategy property is found

    Cannot find module '/private/tmp/create-cozy-app/.tmp_test/test-app/node_modules/cozy-scripts/scripts/config.js' from 'scripts.spec.js'

Will investigate later but if somebody has already encountered the problem or can reproduce, I will be interested :)

yarn start --no-stack

Since 1.12.1 and the new way to deal with the img path, I can't run yarn start --no-stack on Contacts. I got

yarn start --no-stack
yarn run v1.10.1
$ yarn start:browser --no-stack
$ cozy-scripts start --hot --browser --no-stack
Compiling for development environment and browser target...
                                                                                                                                                        98% after emitting✖ ｢wdm｣: Error: EACCES: permission denied, mkdir '/img'
    at Object.fs.mkdirSync (fs.js:885:18)
    at Function.sync (/Users/quentinvalmori/Sites/cozy-contacts/node_modules/mkdirp/index.js:71:13)
    at compiler.hooks.afterEmit.tap (/Users/quentinvalmori/Sites/cozy-contacts/node_modules/webpack-dev-middleware/lib/fs.js:37:20)

Downgrading to 1.11.0 resolves the issue

[Feature Request] Custom config file name

As far as I know, cozy-scripts will automatically load app.config.js and nothing else. In drive, we would benefit of having multiple configuration files that we could load via a command line argument.

Here is our config file — the problem mostly comes from the fact that we have 2 apps in the same repo.

This isn't urgently needed at all, just a nice to have to be considered.

npm run config and enhance webpack config with particular needs

The script npm run config do not expose the complete webpack configuration.

I tried to do

npm run config > app.config.js

but webpack don't run with this "compiled" config file.

BTW: why do you change webpack config file name?

Remove outdated stuff in editorconfig

Template's editorconfig file contains things that are outdated. See cozy/cozy-passwords#1 (comment)

Missing .transifexrc file

The default travis.yml is failing because it references a file that does not exist.
Here's how it was fixed in collect, and that's what I'm doing in contacts too.

Doc is missing for services webpack config

Nothing under https://github.com/CPatchane/create-cozy-app/blob/master/packages/cozy-scripts/docs/webpack-configs.md#webpackconfigservicesjs but listed in summary.

Feedback from using cozy-create-app for cozy-sante

I post here my feedback concerning cozy-create-app as I integrate it with cozy-sante :)

Customize webpack

• Add "You can create app.config.js" to customize at the end of the initialization
• If you use an app.config.js it is mainly to tweak some stuff, therefore I think you should not have to reimport the default bundle ? preact-cli solves this problem by passing the default config to your module so that you can customize it.

Default webpack options

• Modules + chunks clutter the build view

{
      modules: true, // display modules
      chunks: true,  // display chunks
}

• babel-loader option cache could be set to true

Babel

• transform-class-properties

class {
  handleClick = () => {}
}

is a pattern we use across our apps that avoids binding event handler in the constructor. It needs
the following babel transform :

  "plugins": [
    "transform-class-properties"
  ]

Performance

• `app1511730fbaa04962085e.bundle.js    2.22 MB       0  [emitted]  [big]  app`
  

Already big :/

DX

• yarn watch crashes if there is an error during the first compilation

Targets

I think we should not have an index.jsx/index.ejs per target as it will lead to files that
diverge and then it is hard to see the differences. I would put index.ejs and
index.jsx in src/.

Integration with cozy-client

The store needs an instance of the client, lib/store should export a function taking the client to be able to then instantiate cozyMiddleware.

Vendor directory in targets

I don't think it is the proper name since vendor means something that it is not from you, for example a library from another vendor.

Better handling vendor/assets

Better location in files outline + handle when there is no vendor/assets

Doc for hot reloading

This doc should be integrated here I think ?

https://github.com/cozy/cozy-template/edit/master/docs/hot-reloading.md

cozy-scripts webpack issue

Hello !

I've download your creat-cozy-app project. It's working well for project creation but when it comes to run it i have some troubles.
When using the yarn start cmd, with the cozy-app-dev docker container running, i've the following issue :

 95% emitting× ｢wdm｣: TypeError: Cannot read property 'tapAsync' of undefined
    at D:\***\myapp\node_modules\webpack-dev-middleware\lib\fs.js:22:37
    at _next4 (eval at create (D:\***\myapp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at eval (eval at create (D:\***\myapp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:1)
    at D:\***\myapp\node_modules\copy-webpack-plugin\dist\index.js:90:9

I was able to fix it with the following steps :

cd nodes_modules/cozy-scripts/
yarn add webpack

I'm under a windows 10 environnement. I don't know if it's the right way to fix it. Please can you do the update or let me know the right way to fix it.

hook for prettier and eslint

When developing a project with prettier, I write code without bothering me about formating lines. I write, and focus on the plus-value I add to the project.
If developers don't have a well configured editor that runs prettier --write '{src,test}/**/*.{js,jsx}' && eslint --fix '{src,test}/**/*.{js,jsx}' on each modified file, we will have a very inconsistent code base. I think it is very useful to add a git hook that runs prettier --write '{src,test}/**/*.{js,jsx}' && eslint --fix '{src,test}/**/*.{js,jsx}' on every commit.

And also, it is hard to know which rules are behind elsint "extends": ["cozy-app"], I guess there is no formating rules, because running prettier --write '{src,test}/**/*.{js,jsx}' && eslint --fix '{src,test}/**/*.{js,jsx}' will render prettier useless.

Making hot reload the default path

For now, to start hot reload I have to do

yarn cozy-scripts start --hot --browser --no-stack

I think --hot --browser --no-stack should be the default, what do you think ?

Error :"yarn start --stack"

The command line "yarn start --stack" does not work properly, this command does not launch the cozy.
Solution :
In the meantime, you will be to use the docker cozy volumes and map the files.

Update skeleton to use transpiled cozy-ui ?

Since transpiled cozy-ui is almost there we need to make some little changes to our App skeleton.

Alias node-fetch

node-fetch can be used to provide the fetch function to services.

Recently, it introduced a "module" entrypoint that is used by webpack when webpack's target is node.

  "main": "lib/index",
  "browser": "./browser.js",
  "module": "lib/index.mjs",

Since the mjs is prior to js in webpack's default resolve.extensions, the module is used in priority.

It caused problems in banks since the result of the require was a "module" object with a default property. Other libs (like isomorphic-fetch) rely on the result of require('node-fetch') to be the fetch function.

This is why in banks, the resolve was forced to use lib/index.js. See https://github.com/cozy/cozy-banks/blob/e6bc4fdc762031300de393811a03dd926c878a89/config/webpack.target.services.js#L90.

Remove react-bosonic

Specified in dependencies.

Simplify npm scripts

As a developer I don't know where to start.
For instance, build scripts (https://github.com/CPatchane/create-cozy-app/blob/master/packages/cozy-scripts/template/package.json#L12-L15):

"build": "yarn run build:browser",
"commons:build": "cozy-scripts build",
"build:browser": "NODE_ENV=browser:production npm-run-all --serial clean:browser lint:js tx commons:build",
"build:mobile": "NODE_ENV=mobile:production npm-run-all --serial clean:mobile lint:js tx commons:build",

First: build:mobile vs build:browser.

Both are the same but for NODE_ENV variable and for the clean script. We may make the clean script depend on the NODE_ENV to do what it does. Then we'll have:

"build:browser": "NODE_ENV=browser:production npm-run-all --serial clean lint:js tx commons:build",
"build:mobile": "NODE_ENV=mobile:production npm-run-all --serial clean lint:js tx commons:build",

Second: use prescript, script, postscript npm builtin workflow.

The real build task is owned by cozy-scripts, clean, lint, tx tasks are prebuild tasks:

"build": "cozy-scripts build",
"prebuild": "npm-run-all --serial clean lint:js tx",
"build:browser": "NODE_ENV=browser:production npm run build" 
"build:mobile": "NODE_ENV=mobile:production npm run build",

Third: do the exact same reasoning for every linked-with-each-other scripts.

• build
• watch
• etc.

Fourth: limit 0 config scripts to the very minimum

To ease first step, scripts object must contain a really short scripts list:

• test
• watch (or start)
• build
• deploy

Targets (mobile, browser) must be controlled by a flag or environment variable.

Splitting cozy-scripts and CCA

Transpiled styles from cozy-ui are not included in production build

Related to cozy/cozy-drive#1620

When using the transpiled version of cozy-ui, we need to include the associated stylesheet. The recommended way to do this is import 'cozy-ui/react/stylesheet.css'.

However when doing this, the file is not included in production builds (but works fine in dev), presumably because it gets tree-shaken.

Update outdated stuff in PR templates

See cozy/cozy-passwords#1 (comment) and cozy/cozy-passwords#1 (comment)

Intents usage

In https://github.com/cozy/cozy-contacts we want to use intents to let users in another application select a contact.

I try to configure the project to

• build specific html and js files
• load only specific js in specific html file

build specific html and js files

I added to create <my-project>/app.config.js with following

module.exports = [
  require('cozy-scripts/config/webpack.bundle.default.js'),
  require('cozy-scripts/config/webpack.config.intents.js')
]

I believe you can change your config file to include cozy-scripts/config/webpack.config.intents.js only if src/targets/intents/index.html exists using node's path.

Then I created following files:

src/targets
├── browser
│   ├── index.ejs
│   └── index.jsx
└── intents
    ├── index.ejs
    └── index.jsx

load only specific js in specific html file

In index.ejs there is the following to include js files in the html file:

  <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>
      <script src="<%- file %>" defer></script>
  <% }); %>

but it includes every chunk. So a fix is needed.

--analyze flag could add the BundleAnalyzerPlugin

This would facilitate debugging of the size of our bundles.

Eslint improvements

Two small improvemements that would make the linting experience more pleasant IMHO.

• Do not output errors but warnings for syntaxic errors, as they prevent hot reloading
• Autofix syntax errors via eslint-loader

What do you think ?

I am open to do the PR ;)

yarn add --exact cozy-scripts has failed: EROFS: read-only file system, symlink

Hi,

I ran the following command to intialize a new version of the cozy-music app:

yarn create cozy-app cozy-music --vue

I work on Ubuntu 16.04 LTS and I have installed:

• node v8.10.0
• yarn 1.5.1

Here are the logs:

yarn create v1.5.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-cozy-app
[#####################################] 37/37

                                                     %@

     ,#@#W@@p   e@8W@@M,   @@@@@#@@b'@@      #@      @b    ;@#WW@M,
    6@C       ,@#     7$k       ##`  '@@    {$`      $b   @#     "Sk
    $$        @$~      @$     ;@^     '@k  {@^       $b  |$b      @$
    @@        !$b      S@   ,@#        ^Sk;$b        $b  |$b      @$
     @@w,,,#k  "$k,,,e@W   #@Q,,,,,     "$@C   &@k   $b   7@k,,,;@#`
       `^^`       ^^^`     ````````     ;$b    `^`   ``      `^^`
                                       ;$b


Let's create the Cozy Application in /media/sf_projects/cozy-music


✖ An error occured during cozy-music initialisation. Aborting.
yarn add --exact cozy-scripts has failed.

Cleaning remaining generated elements
Deleting generated files/folders from /media/sf_projects/cozy-music
	- node_modules deleted.
	- package.json deleted.
	- yarn-error.log deleted.

cozy-music/ empty folder deleted.
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: /home/gcoter/.yarn/bin/create-cozy-app
Arguments: cozy-music --vue
Directory: /media/sf_projects
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/home/gcoter/.config/yarn/global/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

At the end of the "yarn-error.log" mentioned above, there are some additional logs:

Trace: 
  Error: Command failed.
  Exit code: 1
  Command: /home/gcoter/.yarn/bin/create-cozy-app
  Arguments: cozy-music --vue
  Directory: /media/sf_projects
  Output:
  
      at ProcessTermError.MessageError (/usr/share/yarn/lib/cli.js:186:110)
      at new ProcessTermError (/usr/share/yarn/lib/cli.js:226:113)
      at ChildProcess.<anonymous> (/usr/share/yarn/lib/cli.js:30281:17)
      at emitTwo (events.js:126:13)
      at ChildProcess.emit (events.js:214:7)
      at maybeClose (internal/child_process.js:925:16)
      at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

How can I solve this issue?

Provide a way to disable source maps

Sourcemaps take a long time to be created.
I personally prefer a fast reload than a good source map.

Controlling the devtool parameter of webpack via a CLI flag seems
useful.

Ajouter lodash correctement

Cet article nous explique comment intégrer correctement lodash dans les projets Webpack et Babel. Est ce que ça ne vaudrai pas le coup de l'incorporer directement CCA de base ?

Add data-cozy-subdomain-type="{{.SubDomain}}"

to the default template

check translation string

We will add a check between fr/en/whatever.json files to see if we have difference between files (#1296), but we also need to parse the all app to extract string and check if the string is in the main translation file in order to avoid to use untranslated string (context cozy/cozy-drive@025dcf0 string used but not defined)

Generated project does not work when updating `cozy-ui` dependency

Summary

When creating a brand new project with create-react-app, upgrading cozy-ui to the latest version results in the project not being buildable.

How to reproduce

1. Create a new project: yarn create cozy-app demo-cozy-ui-issue && cd demo-cozy-ui-issue
2. Upgrade the cozy-ui dependency to a very recent version: yarn add [email protected]
3. Either build the project yarn build or start the development server yarn start; an error is shown and the process fails

Error message

    ERROR in ./src/styles/index.styl
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/stylus-loader/index.js):
    Error: Workspace/cozy/demo-cozy-ui-issue/node_modules/cozy-ui/stylus/cozy-ui/build.styl:13:10
        9| \*------------------------------------*/
       10| @require '../settings/*'
       11| @require '../tools/*'
       12| @require '../generic/animations'
       13| @require '../../node_modules/normalize.css/normalize'
    ----------------^
       14| @require '../elements/*'
       15| @require '../objects/*'
       16| @require '../components/*'
    
    failed to locate @require file ../../node_modules/normalize.css/normalize.styl
    
        at CachedPathEvaluator.visitImport (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus-loader/lib/evaluator.js:157:21)
        at CachedPathEvaluator.Visitor.visit (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/index.js:28:40)
        at CachedPathEvaluator.Evaluator.visit (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/evaluator.js:160:18)
        at CachedPathEvaluator.Evaluator.visitBlock (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/evaluator.js:720:39)
        at CachedPathEvaluator.Visitor.visit (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/index.js:28:40)
        at CachedPathEvaluator.Evaluator.visit (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/evaluator.js:160:18)
        at CachedPathEvaluator.importFile (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus-loader/lib/evaluator.js:84:18)
        at CachedPathEvaluator.visitImport (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus-loader/lib/evaluator.js:162:27)
        at CachedPathEvaluator.Visitor.visit (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/index.js:28:40)
        at CachedPathEvaluator.Evaluator.visit (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/evaluator.js:160:18)
        at CachedPathEvaluator.Evaluator.visitRoot (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/evaluator.js:707:27)
        at CachedPathEvaluator.Visitor.visit (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/index.js:28:40)
        at CachedPathEvaluator.Evaluator.visit (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/evaluator.js:160:18)
        at CachedPathEvaluator.Evaluator.evaluate (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/visitor/evaluator.js:247:15)
        at Renderer.render (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/renderer.js:86:26)
        at Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus-loader/index.js:167:12
        at runLoaders (Workspace/cozy/demo-cozy-ui-issue/node_modules/webpack/lib/NormalModule.js:301:20)
        at Workspace/cozy/demo-cozy-ui-issue/node_modules/loader-runner/lib/LoaderRunner.js:367:11
        at Workspace/cozy/demo-cozy-ui-issue/node_modules/loader-runner/lib/LoaderRunner.js:233:18
        at context.callback (Workspace/cozy/demo-cozy-ui-issue/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus-loader/index.js:169:11
        at Renderer.render (Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus/lib/renderer.js:107:12)
        at Workspace/cozy/demo-cozy-ui-issue/node_modules/stylus-loader/index.js:167:12
        at tryCatchReject (Workspace/cozy/demo-cozy-ui-issue/node_modules/when/lib/makePromise.js:840:30)
        at runContinuation1 (Workspace/cozy/demo-cozy-ui-issue/node_modules/when/lib/makePromise.js:799:4)
        at Fulfilled.when (Workspace/cozy/demo-cozy-ui-issue/node_modules/when/lib/makePromise.js:590:4)
        at Pending.run (Workspace/cozy/demo-cozy-ui-issue/node_modules/when/lib/makePromise.js:481:13)
        at Scheduler._drain (Workspace/cozy/demo-cozy-ui-issue/node_modules/when/lib/Scheduler.js:62:19)
        at Scheduler.drain (Workspace/cozy/demo-cozy-ui-issue/node_modules/when/lib/Scheduler.js:27:9)
        at process._tickCallback (internal/process/next_tick.js:61:11)
     @ ./src/targets/browser/index.jsx 2:0-16
     @ multi ./node_modules/babel-polyfill/lib/index.js ./node_modules/cozy-scripts/utils/reactExposer.js ./src/targets/browser/index.jsx

Additional information

I came across the issue after noticing that the default cozy-ui dependency of the generated project was quite old, and I wanted to use the Card component in my project (I just noticed that that component is actually a lot more recent that I thought). So I thought "Let's just bump the version of the dependency to the latest available, nothing too bad should happen..." Famous last words. 😆

More seriously, the issue seems to have appeared following PR 833 in cozy/cozy-ui as using the following release (18.15.0) in the generated project shows the error above, but the previous version (18.14.0) does not.

I assume cozy-ui works as intended, hence why I am filing an issue here. I do not have enough experience with Webpack to know with certainty whether it is the case though.

Error on start

After creating an app with yarn create cozy-app cozy-ocr, i'm getting a webpack error at app start.

➜  cozy-ocr yarn start
yarn run v1.21.1
$ cs start --hot --browser
Compiling for development environment and browser target...
                                                                                                    95% emitting✖ ｢wdm｣: TypeError: Cannot read property 'tapAsync' of undefined
    at /Users/valentin/Dev/Projects/cozy-ocr/node_modules/webpack-dev-middleware/lib/fs.js:22:37
    at _next4 (eval at create (/Users/valentin/Dev/Projects/cozy-ocr/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at eval (eval at create (/Users/valentin/Dev/Projects/cozy-ocr/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at /Users/valentin/Dev/Projects/cozy-ocr/node_modules/copy-webpack-plugin/dist/index.js:90:9

It is probably a dependency version problem in the webpack plugins used by your scripts.

Changements iphone X

On a fait quelques changements de boilerplate sur Drive pour accommoder l'écran de l'iphone X.

Certains changements pourraient être intégrés a CCA, par exemple les changements de balise meta. Est-ce que ca t'intéresse d'avoir ca? je peux faire une PR si oui.

Watch crashes on module not found

Error: ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/icons/icon-filter' in '/Users/pbrowne/code/cozy/sante/src/components/AccountSwitch'

makes the watcher crash. Expected behavior would be to continue watching.

Stack trace:

Error: ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/icons/icon-filter' in '/Users/pbrowne/code/cozy/sante/src/components/AccountSwitch'
    at Watching.compiler.watch [as handler] (/Users/pbrowne/code/cozy/sante/node_modules/cozy-scripts/scripts/watch.js:19:13)
    at Watching._done (/Users/pbrowne/code/cozy/sante/node_modules/webpack/lib/Compiler.js:100:9)
    at onCompiled (/Users/pbrowne/code/cozy/sante/node_modules/webpack/lib/Compiler.js:50:25)
    at applyPluginsParallel.err (/Users/pbrowne/code/cozy/sante/node_modules/webpack/lib/Compiler.js:504:20)
    at /Users/pbrowne/code/cozy/sante/node_modules/tapable/lib/Tapable.js:285:11
    at _addModuleChain (/Users/pbrowne/code/cozy/sante/node_modules/webpack/lib/Compilation.js:498:12)
    at processModuleDependencies.err (/Users/pbrowne/code/cozy/sante/node_modules/webpack/lib/Compilation.js:474:15)
    at finalCallbackAddModuleDependencies (/Users/pbrowne/code/cozy/sante/node_modules/webpack/lib/Compilation.js:375:12)
    at /Users/pbrowne/code/cozy/sante/node_modules/webpack/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/pbrowne/code/cozy/sante/node_modules/webpack/node_modules/async/dist/async.js:1048:13)
    at /Users/pbrowne/code/cozy/sante/node_modules/webpack/node_modules/async/dist/async.js:958:16
    at finalCallbackAddModuleDependencies (/Users/pbrowne/code/cozy/sante/node_modules/webpack/lib/Compilation.js:375:12)
    at /Users/pbrowne/code/cozy/sante/node_modules/webpack/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/pbrowne/code/cozy/sante/node_modules/webpack/node_modules/async/dist/async.js:1048:13)
    at /Users/pbrowne/code/cozy/sante/node_modules/webpack/node_modules/async/dist/async.js:958:16
    at finalCallbackAddModuleDependencies (/Users/pbrowne/code/cozy/sante/node_modules/webpack/lib/Compilation.js:375:12)

[eslint-config-cozy-app] Problème de mise à jour de eslint

Sur tous les connecteurs utilisant eslint-config-cozy-app nous avons un souci avec la mise à jour de eslint pour passer à la version 4.19.0 voir cette PR.

L'erreur ne provient pas de la version de yarn chez Travis. Puisque qu'avec la dernière version en local on a le même souci.

L'erreur est aussi chez d'autres projets comme algolia. Attendons quelques jours pour voir si l'erreur existe toujours ;)

Ajouter un favicon spécifique à l'application

Le but de cette issue est de se souvenir que l'on peut améliorer la gestion des favicons pour les prochaines applications.

A faire:

• Ajouter un png avec le logo de l'application (le créateur de l'app aurait juste à changer ce PNG)
• Créer des commandes pour générer toutes les favicons depuis ce PNG

Tu en penses quoi @CPatchane ?

Cette issue fait référence à https://github.com/CPatchane/create-cozy-app/pull/1139 qui permet d'afficher le favicon de la stack.

dev (watch) Target browser public page, no asset

When we run the app in dev mode, the public page is not working since we can't access to cozybar, cozyclient and so on.

Building the app fix the issue...

We think this is related to : https://github.com/CPatchane/create-cozy-app/blob/master/packages/cozy-scripts/config/webpack.environment.dev.js#L32-L36

We should copy these files in the public directory, no?

yarn create cozy-app fails with node 12

Hi,

I'm trying to setup a dev environment for Cozy.
For informtion, my local env is the following:

• I'm running Ubuntu 18.04
• Version of Yarn is: 1.22.4
• Version of node is: 12.16.1
• I run a Cozy development image in docker (following these instructions: https://docs.cozy.io/en/tutorials/app/)

When I run the yarn create cozy-app mycosyapp command, I get the following error message:

ERROR:
(node:24578) UnhandledPromiseRejectionWarning: #<Object>
(node:24578) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:24578) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The failure comes from the build operation and the --verbose option provides more details:

/home/gaadek/.cache/node-gyp/12.16.1/include/node/v8.h:2878:7: note:   no known conversion for argument 1 from ‘char*’ to ‘v8::Isolate*’
leveldown.target.mk:129: recipe for target 'Release/obj.target/leveldown/src/batch.o' failed
make: Leaving directory '/home/gaadek/projects/mycozyapp/node_modules/leveldown/build'
make: *** [Release/obj.target/leveldown/src/batch.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:311:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Linux 5.3.0-46-generic
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/gaadek/projects/mycozyapp/node_modules/leveldown
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

This makes me feel the create-cozy-app does not support Node12 (yet), can you confirm this?

Conflicting assets instructions in mobile:development

When running cozy-scripts with target=mobile and env=development, there are contradictions about what to do with cozy-client-js and cozy-bar.

• The dev config copies the files (to the wrong folder), an tries to inject them in the app. It also treats everything cozy as an external.
• In the mobile config, we provide the assets

It's not a big deal — since the fiels are copied in the wrong directory, they don't get loaded by the app. Even if they are copied into the right directory… they get included twice, which might lead to side effects but is still ok.

Not sure what the correct solution here is though.

Publish script is failing

Publish script is failing on [email protected]. See https://travis-ci.org/cozy/cozy-store/jobs/578391579#L569

Unfortunately the real error is swallowed by the runGlobalPackageCLI function. This may be the first thing to do to debug this issue.

On cozy-store, for now, we used npx instead of cozy-scripts publish to bypass this issue. See cozy/cozy-store#656.

Hot Reload

When I develop for the web, I use to have the loaded webapp on a browser and a code editor with source.
I cannot press F5 (or ctrl+shift+r) every single time I change something in the source.

Can't we get

• hot reload (refresh the page)
• with HMR (update changed module)
• and react hot reload (without changing the state)

within create-cozy-app configuration?

See https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf
and https://webpack.js.org/concepts/hot-module-replacement/

As far as I know, CRA does not provide React HMR, but at least it reloads the page on each save.

Add embedded target and config

cozy/cozy-banks#1796 (comment)

update template to use data-cozy instead of indivual item

Prefer to use [data-cozy] to store template data. <div data-cozy="{{.CozyData}}>.

https://github.com/cozy/create-cozy-app/blob/master/packages/cozy-scripts/template/app/src/targets/browser/index.ejs

Services should not use the same babel config as the rest of the app

Problem

When developing on our machines, node is used directly on the non-bundled files. After bundling, async/await is transformed and we need regeneratorRuntime to run our files -> babel-polyfill is required. We should not require to do that since for services we target node 8 and async/await works by default on Node.

Solution

The babel configuration for services should be changed and transforms be removed. I guess the babel-preset-env could be tweaked to include just node 8.