WebStorm 2016.3 EAP, 163.4396: Create React app

Ekaterina Prigara

WebStorm 2016.3 EAP build (163.4396) is now available! You can download it here. Unfortunately, there’re no patch-updates available this time.

Create React App

Create React App is an officially recommended way to create new React apps. And now you can create new apps using Create React App right from the IDE Welcome screen!

create-react-app

Make sure that you have create-react-app installed globally on your computer, for that run npm install -g create-react-app. Then to start your new project, double click on the start task in the npm tasks tool window to run it. That’s it!

Improvements in Angular 2 support

When providing code completion and resolve for methods in the Angular 2 templates, WebStorm now understands available type info and therefore provides more precise results.

ng2-methods-completion

In addition to that, in the TypeScript projects all compiled JavaScript files are now automatically excluded, so that they won’t appear in resolve, find usages, search results, etc. Please let us know what you think about it.

You can find a more detailed list of issues addressed in this EAP build in the Release notes.

Learn more about other new features in WebStorm 2016.3:

  • WebStorm 2016.3 EAP, 163.3094: Integration with Flow; PostCSS support; Smarter Rename for TypeScript; More features in Angular CLI integration; Grouped generated files in the Project view; Option to generate an .editorconfig file; Code style option for arrow functions.
  • WebStorm 2016.3 EAP, 163.3512: Integration with Docker for Node.js apps; Bundled Fira Code font; San Francisco font is default on OS X; Flow tool window with file and project errors.
  • WebStorm 2016.3 EAP, 163.3983: ESLint autofix; Automatically detecting TypeScript version in the project; Undo commit action; Test names now available in the Go to symbol.
  • WebStorm 2016.3 EAP, 163.4830: Integration with Stylelint; Find usages for ES6 default exports; Updates Angular 2 live templates; New inspection “TypeScript import can be shortened”.
  • WebStorm 2016.3 EAP, 163.5219: Better support for ES6 object destructuring.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

– JetBrains WebStorm Team

Comments below can no longer be edited.

28 Responses to WebStorm 2016.3 EAP, 163.4396: Create React app

  1. Rob McDiarmid says:

    September 15, 2016

    The Angular 2 support in templates is great! And hiding compiled js files is very handy.

    Are there plans to continue to add TypeScript support to Angular 2 templates to the point where something like {{“test”.typo()}} would generate an error?

  2. Thomas says:

    September 16, 2016

    Cool, but where’s that/what’s that?

    “start task in the npm tasks tool”

    Thanks for help!

    • Ekaterina Prigara says:

      September 16, 2016

      That’s the one one the screenshot above. WebStorm lists all npm tasks from the package.json file in a tool window and allows you to start a task by simply double-clicking on it.

  3. Dan Gamble says:

    September 16, 2016

    Do you guys have any Vue based integration on your roadmap? 🙂

    • Ekaterina Prigara says:

      September 16, 2016

      Not in this update 🙁 Please vote for a feature request: https://youtrack.jetbrains.com/issue/WEB-19082
      Have you tried Vue.js plugin?

      • Dan Gamble says:

        September 20, 2016

        No worries 🙂 Already voted!

        I have before but i removed it, can’t remember why. Will give it another try thanks 🙂

  4. lizhihua says:

    September 18, 2016

    whether can add ” to .idea/.iml
    because ‘node_modules/’ files is too much, my webstorm will crash

    • lizhihua says:

      September 18, 2016

      excludeFolder url=”file:\/$MODULE_DIR$\/node_modules”

    • Ekaterina Prigara says:

      September 19, 2016

      Can you please provide a bit more details on the problem you have on https://youtrack.jetbrains.com/issues/WEB

  5. Nathaniel says:

    September 20, 2016

    On Windows the latest round (last 4 releases for me) of WebStorm EAPs have complained there’s no valid JVM (running 64bit). 2016.2 is running fine, is there something changed?

    • julia.mochenkova says:

      September 21, 2016

      You’re using 2016.3 EAPs, right? On Windows when you’re starting 64-bit launcher it uses you system 64 bit java. What java version have you installed?

    • Mörre Noseshine says:

      September 21, 2016

      Jetbrains has their own JDK versions for both 32 and 64 bit. I don’t know what the differences are between one you download from Oracle, but I read something about font options like ligatures or font smoothing, no idea what else.

      So anyway, the 32 bit JDK is bundled, but you have to download the 64 bit version, they don’t include it because a) of its size and b) the 32 bit version is actually highly recommended unless you really need that much more RAM (do you?).

      Unfortunately I found their support page which has the downloads only once and through SO posts, I’m unable to locate it through search. It is incredibly well hidden.

  6. Howard Jones says:

    November 9, 2016

    “And now you can create new apps using Create React App right from the IDE Welcome screen!”

    I’m looking in 2016.2.4, and I don’t see anything mentioning create-react-app on the welcome screen… (it is installed globally, and WebStorm knows where my nodejs install is)

    I don’t see any special C-R-A related plugin to install, or new settings… is this still only in EAP?

    • Howard Jones says:

      November 9, 2016

      Ugh. Brains. I saw the 3 and figured my 4 was newer. But 3.0 > 2.4. Dropping part of the version number doesn’t improve clarity.

      • Ekaterina Prigara says:

        November 9, 2016

        Right, this is only available in WebStorm 2016.3 which is now a Release Candidate and is going to be finally release next week.

  7. dennis says:

    December 8, 2016

    after npm install -g create-react-app, still can’t create, why?

    [image description here]
    https://i.stack.imgur.com/JZov6.png

    • Ekaterina Prigara says:

      December 8, 2016

      What version of create-react-app do you have? What error message do you see when you try to create a project?

  8. jim caprioli says:

    January 2, 2017

    Create-react-app supports live editing with any editor but when files are edited with Webstorm cra does not seem to get the signal of any edits made. What’s the point without live editing?

    • Ekaterina Prigara says:

      January 9, 2017

      There’re some known issues with the hot reloading on Windows on the webpack-dev-server side, that’s not only WebStorm-specific. We hope to have a closer look on that this year and see what we can do.

  9. jim caprioli says:

    January 2, 2017

    With the system setting “Use Safe Write” checked, ReactJS Live Editing does not work. After unchecking Live Editing works.

    • rama says:

      March 6, 2017

      Thanks Jim!!! really helpful!

      • Ekaterina Prigara says:

        March 6, 2017

        That soon shouldn’t be an issue with Webpack 2.

  10. Oliver Watkins says:

    March 29, 2017

    The documentation for creating a React project is very confusing.

    “Then to start your new project, double click on the start task in the npm tasks tool window to run it. That’s it!”

    What does that mean? What is the “npm tasks tool window”?

    And seperate issue : Why has npm installed everything globally in your example?

    Surely there must be an easier way to create a simple React project. It’s just a few javascript files and a HTML file. I wasn’t expecting node to pull 50,000 files from the internet and crashing my computer.

    I also tried to create a react app via the new project wizard. It says ‘React App’. I type in location and the second field connects to my node interpreter, yet the third field ‘create-react-app’ is empty and required. I am not sure what this field means, and there is also no tooltip to explain what this field means.

    • Ekaterina Prigara says:

      March 29, 2017

      Create React App is a name of an official project generator for React applications. You can find more about it here: https://github.com/facebookincubator/create-react-app
      What this blog post says is that WebStorm now supports this recommended way of creating React apps.
      As it is said in the blog post, you need, first, to install create-react-app globally via npm (global installation is recommended by the package authors). After that you’ll be able to use it to generate the project from the WebStorm welcome screen.

  11. Guilherme Vasconcelos says:

    May 2, 2017

    Do we need to extract the eslint configuration from the package.json to make the Idea reads it?

    I tried to setup the package.json as the configuration file but I get errors.

    Thanks!

    • Ekaterina Prigara says:

      May 2, 2017

      Should work fine with the configuration in package.json. In Preferences – ESLint select Automatic search or Configuration file and specify the path to package.json.
      What error do you get?

  12. Dave Schinkel says:

    May 16, 2017

    create-react-app breaks your ability to run mocha tests which is typically done two ways

    1) by specifying node_modules/babel-cli/bin/babel-node because react-create-app does not install babel-cli

    2) or you can add the flag –compilers js:babel-core/register but that no longer works either

    If you try adding a .babelrc to react-create-app, that goes against the point of using react-create-app unless you run ‘eject’ which allows you to override react-create-app’s magic, and add manual entries for babel in package.json. So if you’re on a team who wants to try to use react-create-app for the purpose of making things “easier” you will run into this major issue…because FB tries to only push Jest, they don’t care about supporting anything else.

    I have not found a way, even installed the CLI to try to get my mocha tests running in a create-react-app. Adding a .babelrc doesn’t help anymore for this so consequently when you run your tests from Webstorm’s mocha config, you’ll get ES6 errors as it’s not finding babel to transpile the code on the fly anymore:

    SyntaxError: Unexpected token import
    import React from ‘react’;

    • Ekaterina Prigara says:

      May 16, 2017

      Hello Dave,

      I’ve read the thread on GitHub.
      Please let me know whether you were able to successfully run your Mocha tests from the terminal.