WebStorm 2016.3 EAP, 163.4396: Create React app

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , . Bookmark the permalink.

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

  1. Rob McDiarmid says:

    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:

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

    “start task in the npm tasks tool”

    Thanks for help!

    • Ekaterina Prigara says:

      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:

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

  4. lizhihua says:

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

  5. Nathaniel says:

    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:

      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?

    • 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:

    “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?

  7. dennis says:

    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:

      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:

    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?

  9. jim caprioli says:

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

  10. 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:

      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:

    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:

      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:

    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:

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *