I have been developing applications in JavaScript for some time now using various libraries, and recently went through setting up a development environment for React JS based applications, mainly due to the immense popularity of this library.

Here is how I was able to setup a development environment successfully, without any help from “create-react-app”. I did this primarily to be able to dig deeper into the inner workings of setting up a development environment while understanding fully that “create-react-app” was the preferred method to develop React JS apps. Please see React JS website for reference.

IDE

I use Visual Studio Code for all of my coding work, regardless of the language or framework.

JavaScript Debugging

For JavaScript debugging, my favorite tool is Chrome DevTools. Also see this handy guide to setup JavaScript debugging in VSCode.

Git

I use OSX for development and it includes Apple git by default. To check the currently installed, execute the following command in terminal:

% git –version

In case your preferred operating system does not have git, it can be downloaded from Git website and installed using instructions on the same website.

MongoDB

Following commands were used to install MongoDB on OSX:

$ brew update 
$ brew tap mongodb/brew 
$ brew install mongodb-community

To start MongoDB as a service, use this command:

$ brew services start mongodb-community

Finally, run the MongoDB interactive shell using ‘mongo’ command in terminal, then create a database by using the ‘use’ command:

$ use <database_name>

MongoDB will create the new database for you and switch over to the database as well.

A collection in the database can be created using the following syntax. Note that the following commands will create a collection as well as documents within the collection using the collection save method:

$ db.collection.save({ type: "document_name" })

Replace “collection” and “document_name” with your preferred collection and document name respectively.

We can create multiple documents within the collection with a single save command, if needed, by specifying a comma delimited list of documents, like so:

$ db.collection.save([{type: "document1"}, {type: " document2"}])

To see all documents within a collection, use the find() method:

$ db.collection.find()

We can also find individual documents, both by property values as well as with Mongo’s assigned ID:

$ db.collection.find({ type: "document1" }) 
$ db.collection.find({ _id: ObjectId("DOCUMENT ID") })

To update documents, use the update() method:

$ db.collection.update({ type: "document1" }, { type: "document2" })

To remove a document, use remove() method:

$ db.collection.remove({ type: "document1" })

Node.js

Node.js can be downloaded and installed from Node JS website

Because I run multiple versions of node, I use NVM to manage these versions for me. Please see instructions on NVM Github repository to install and configure NVM.

Web Server

We will be using express web server based on node.js for the purpose of this article.

Yarn

For dependency management to develop React applications, I prefer to use Yarn. Yarn can be installed with the following command:

npm install --global yarn

To start the React app development, we need multiple node packages. We may install these packages individually by first initiating a package.json file in the project directory and then adding packages one by one, or the more convenient method to include all packages as either dependencies or development dependencies in the package.json file and then just executing the ‘yarn’ command to pull and install all of the required packages. I usually prefer the second method for reasonably complex projects. See the package.json file in the companion Github repository listed at the end of this article for reference. In case you prefer the first method, please see yarn website.

Please note that you will see .babelrc and webpack.config files in this post’s companion project hosted on Github. These can be used as reference configuration files for your project. Note that babel is used as a JavaScript transpiler and Webpack as a bundler. See their respective websites at babeljs.io and webpack.js.org for further info. We will be using webpack.config.client.js for development as it’ll be configured for transpiling, bundling and hot-reloading our code, while the webpack.config.client.production.js config file will be used for production because it does not include any reference to development dependencies. File webpack.config.server.js can be used either for development or production. Please see the comments included in server.js file for further info. This file also triggers the client-side React code compilation for the development mode, responds to web requests and sets up a connection with MongoDB database.

You will also notice nodemon.json file in the repository. Nodemon Node.js package is used to monitor directories for change and automatically restart the application. Please see nodemon website for further info.

React front-end code is developed using JSX format. Please see React JSX introduction for detailed explanation and a tutorial.

The package.json file also includes development and production scripts, used for to run different build types based on our requirements. These scripts can be executed using ‘yarn dev’, ‘yarn build’ and ‘yarn start’ commands.

For the development mode, we will run the webpack server config in development mode. This will generate a server-side code bundle. This server-side bundle will contain code from both server.js and clientCompile.js files as needed for development mode.

The transpiled and bundled code will be placed in dist/server.generated file. This code starts express server, initiates client-side compilation and then loads the generated static resources from the bundle.js file for the web interface. Note that for this option, the code is generated by webpack and then run by node as specified in the nodemon.js file.

In the build mode, we build production code for both client and server sides. For this option, we only generate the code, and not run it.

In the start mode, we load the server.generated.js file which will be the server-side bundle file that can be used for deployment of server-side code. Note that in this mode we only run the server-side code, and no client-side code is included because clientCompile.js file is only accessed from server.js during development.

Please go ahead and clone the repository, execute ‘yarn’ and then ‘yarn dev’ command, open your browser at localhost:3000 and make changes to the hello.js file. It’ll auto-reload the changes in your preferred web browser interface. Happy coding!

Github Repository Link