Improvement & bugs for the Widgets Quick Start Guide

Widgets
1

I talk about this guide: <INTERNAL_LINK>

I just tried to follow the Widgets Quick Start Guide (that is a great thing!). Some thoughts & problems I encountered:

  • I had to set up my Artifactory access and create my .npmrc and this was a bit challenging, as I didn’t have my Artifactory account data at hand. The “Forgot Password” process of Artifactory doesn’t work.
  • Creating the react app: I think it’s nowadays better to avoid installing global packages as they are not controlled by the project’s pkackage.json. Therefore it’s probably better to use
npx install -g create-react-app create-react-app hello-widgets --scripts-version=react-scripts-ts
  • When installing the A12 DevTools and Widgets, is it meant to be without the -s option? Or the save-dev option?
  • The guide says Widgets is built on react and react-dom 16.4.2, so we recommend you to also install these versions.. In my case it had installed higher versions already:
    "react": "^16.7.0",
    "react-dom": "^16.7.0",

Is the guide already outdated?

  • When I replaced the App.tsx with the suggested code, my React App didn’t work anymore and showed the following error:
Failed to compile
/Users/tgartner/git/hello-widgets/src/App.tsx
(2,1): Import sources within a group must be alphabetized.

To fix this I sorted the imports. This lead to the next error:

Failed to compile
/Users/tgartner/git/hello-widgets/src/App.test.tsx
(1,24): ' should be "

By now I fixed all the problems. Since your linter is a Nazi (i.e. very strict), you should mention in your guide some seetings needed in the editor:

  • Quotes should be " not ’
  • Use Tabs instead of blanks

Thank you very much for this great Getting Started tutorial, it’s really great!!

2

Hi @till-atomic-slope, can you send me your project?

3

Hi Till,

I will try to answer some of your questions/suggestions:

  • create-react-app should not belong to the project dependency. It’s only a cli tool that is used once in the lifetime of the project :wink:
  • npm5 come with -s when you install dependency, so you don’t need to. However --save-dev seems to be valid. We will update the guide :wink:
  • We recommend to use react version that widgets was built on, but nothing prevent you from using newer version. And the guide won’t update to reflect every react update
  • You are not using the linter from our devtools. Those “stupid” alphabetized import thingy is from the public tslint that come with create-react-app.

Cheers.