React environment with Webpack, Enzyme, Mocha and Karma

This is the first post describing the development of a new Blogging engine using React that I am building for fun. This first post describes the environment setup and add some more information on how to use these frameworks.

The code can be found here : https://github.com/non-o/nono-blog, and this post is mainly targeted to the v0.1.0 tag. so you can clone the repository and then checkout the v0.1.0 tag to follow. (or to get an inital setup for your project)

to get it working just clone the repo and run npm install

>git clone https://github.com/non-o/nono-blog.git

>cd nono-blog

>npm install

The setup is made so that you can use es6 to code your react components, when you run the app with the following command:

>npm start

Then navigate to http://localhost:8080/public/index.html it will start the webpack dev server and will hot deploy as you change your code.

for testing, I use karma, mocha and enzyme to test the React components. When changing the code or the tests, their are automatically rerun.

>npm test

If you want to debug, when chrom starts karma, there is a debug button that opens a new tab, press CTRL+SHIFT+I to get the developer tools and you can navigate to your files and set breakpoints. you can also use the debugger; to hit when loading the page and you ready to develop a beautifull app.

Remember the advice:

Don’t write code that you don’t know how to test

I hope that with the following setup, I’ll be able even to test React UI components.


for more info check the following great tools:

These posts also helped me to setup this environment :

These repositories were valuable also:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s