strvcom / create-strv-app Goto Github PK

We should probably add firebase-cli as a dev dependency, and also add deploy script

Environment

• node v9.8.0
• npm v5.8.0
• yarn v1.5.1

Steps to reproduce

After getting through all steps

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-strv-app
[STRV placeholder]
? Choose an application type: SPA
? Choose a template: default
? Enter your project name: projectname
? Sugar on top: styled-components

I expect no errors, but I got:

✖ ERROR Failed with following error: Error: ENOENT: no such file or directory, open '/Users/username/STRV/projectname/package.json'

error An unexpected error occurred: "Command failed.
Exit code: 1
Command: /usr/local/bin/create-strv-app
Arguments: 
Directory: /Users/jakubkotula/STRV/test
Output:
".

I'm adding babel-plugin-module-resolver plugin using this configuration in .babelrc:

"plugins": [
    [
      "module-resolver",
      {
        "root": ["."],
        "alias": {
          "containers": "./src/containers"
        }
      }
    ]
  ]

then in index.js I use import App from 'containers/App'.

Expected behavior

App is imported and application starts

Actual behavior

Application fails with error:

'containers' should be listed in the project's dependencies. Run 'npm i -S containers' to add it  import/no-extraneous-dependencies

We used SPA template for https://github.com/strvcom/strv-admin-web, at the beginning we dealt with a few issues or not completed configuration. I wrote small guideline which may help others to use it.

Before creating PR I would like to discuss what you consider as mandatory and other aspects.

Here is the list of changes in SPA project itself:

tasks in package.json

eslint

• missing task for run eslint/lint

• after checking eslint, several warnings/errors appeared, mainly that some Definition for rule was not found:

  • solved adding eslint-plugin-import package
  • edited file registerServiceWorker to have export default at the end of file
  • had to add in .eslintrc

  "globals": {
      "process": true
    },
  "env": {
      "jest": true
    }
  

  • App.js doesn't suit to eslint rule react/prefer-stateless-function and also contains classNames through styled-components option

flow

• discussion and issue here: #3
• my summary:
  • flow option: missing task in precommit
  • after first running: app reference error:

  Module build failed: ReferenceError: Unknown plugin "flow" specified in "/home/paave/WebstormProjects/create-strv-app/test/.babelrc" at 0, attempted to resolve relative to "/home/paave/WebstormProjects/create-strv-app/test"
       at Array.map (<anonymous>)
  

  • missing .flowconfig file

relative paths - module resolving

• had to add babel-plugin-module-resolver and eslint-import-resolver-babel-module
• added file .env with NODE_PATH='src'
• in .flowconfig options section added module.system.node.resolve_dirname=./src module.system.node.resolve_dirname=node_modules
• in .eslintrc:

"settings": {
     "import/resolver": {
       "babel-module": {},
       "node": {
         "paths": [
           "./src"
         ]
       }
     }

Worth considering

• checking if every file has // @flow comment: credit to @koss-lebedev

 FILES_COUNT=$(echo $FILES_WITHOUT_FLOW | wc -w)
 
 if [ $FILES_COUNT -ne 0 ]
 then
   echo "Following files are missing @flow annotation:"
   echo $FILES_WITHOUT_FLOW | tr " " "\n"
   exit 1
 fi 

last but not least

• missing .editorconfig

After initialising project with flow, you have to call flow init to make flow checker working.

Solution could be to add some basic .flowconfig file or call flow init after npm install.