Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Eligio Merino
Infrastructure & Web Officer with +20 years in building, securing, monitoring and leading Full-stack platforms.

Making React run properly in Eclipse can be a really big headache…or an amazingly cool experience with CodeMix! CodeMix integrates the best of the VS Code world into Eclipse, such as support to create and debug React applications. Follow this React tutorial to quickly create and debug an app in Eclipse with CodeMix:

Create Your App 

  1. Make sure you have NodeJS and NPM installed; for this cookbook, I am using NodeJS v8.11.2 and npm 5.6.0 on Windows 10 64-bit.
  2. Install CodeMix into your Eclipse v4.7.3a (Oxygen 3a):

    Personally, I also installed the free DevStyle plugin to have the cool Darkest Dark theme in Eclipse, along with other power-ups.
  3. Now you can create a new React project inside Eclipse! Just go to File > New > Other > CodeMix > React Project, and then provide a name for your project, and CodeMix creates it for you.
  4. By default, React opens your OS default browser at startup time, which can be quite annoying if you are debugging in a different browser. To tell React not to open your OS default browser, right-click on your React project’s name and choose Show in Local Terminal > Terminal; then, from the prompt-line enter:
    SET BROWSER=none
  5. Now build and run your project by entering commands:
    npm install --global react-scripts
    npm install
    react-scripts start

    Tip: You can also use the command palette in CodeMix to execute npm commands. Just press Ctrl/Cmd+Shift+P and start typing.

Debug Your App

  1. Establish a breakpoint — let’s say at line 4 ReactDOM.render() in the src/index.js file.
  2. Right-click on your React project and choose Debug As > Debug Configurations, and then right-click on CodeMix and select New.
  3. In the New CodeMix Launch Configuration dialog, select your React project’s name and then click OK.
  4. A new .vscode/launch.json configuration file will be opened in the Eclipse editor; enter these debugging settings to connect your React project with your Chrome browser, and then save the file:

  5. Right-click on your React project and choose Debug As > Debug Configurations, and then double-click on your new Chrome debug configuration. 

    React Tutorial: Debug Configurations

    A new Chrome window opens pointing to your React app at http://localhost:3000/.

  6. To start the debugging between Chrome and Eclipse, refresh that window with F5 (a workaround that the Chrome-Debugger extension developers may improve in the future). You will see something like this in your browser:

    React Tutorial: Chrome Debugging

And that’s it! Adding CodeMix to Eclipse will make your @CoderLife easier as it allows you to build and debug your own React applications in no time! And even better, CodeMix also supports building and debugging other popular techs, such as Angular, Python, PHP, VUE, Node and Go — among others. 

After completing this React tutorial, you’ll probably love CodeMix like I do and you will want to unlock your CodeMix 45-day trial period: in Eclipse, go to Help > Update License and click on the Login or register link.

React Tutorial: CodeMix Access

Related Posts

PHP Development in Eclipse Has Never been Easier! Great news for you, PHP developer: your coding experience in Eclipse just got better thanks to CodeMix! It’s an Eclipse plugin that gives you access to a whole array of technologies from VS Code and add-on extensions built for Code OSS.How does CodeMix handle PHP support? Directly from Code OSS! There is also extra functionality thanks to an array ...
CodeMix – Technical Preview Now Available Today, we’ve shipped to the the Eclipse community our technical preview of CodeMix. What is CodeMix, how do you install it, what makes it so cool? Read on for the details.What is CodeMix?CodeMix is a technology that allows developers to take advantage of the wide array of tooling, language, and framework support that is available with Visual Studio...
Angular 5, Firebase, and Angular Universal: Creati... We will continue from where we left off in the first article. In this part of the article, we will add the markdown editor for authoring posts on our blog, and we will set up Firebase for authentication and persisting data to remote storage. Let’s get started!Starting a New Cloud Firestore ProjectOpen the Firebase console and sign in to your Google...

Posted on May 24th 2018