Preparing the Development Environment

Before building applications with the MERN stack, we first need to prepare the development environment with each technology, and also with tools to aid development and debugging. Working with this stack requires that you make different technologies and tools work well together, and given the many options and resources available on this topic, it can seem like a daunting task to figure out how it all comes together. This chapter guides you through the workspace options, the essential development tools, how to set up the MERN technologies in your workspace, and how to check this setup with actual code.

We are going to cover the following topics:

• Selecting development tools
• Setting up MERN stack technologies
• Checking your development setup

Selecting development tools

There are plenty of options available when it comes to selecting basic development tools such as text editors or IDEs, version control software, and even the development workspace itself. In this section, we will go over the options and recommendations that are relevant to web development with the MERN stack so you can make informed decisions when selecting these tools based on individual preferences.

Workspace options

Developing on a local machine is a common practice among programmers, but with the advent of good cloud and remote development services, such as AWS Cloud9 (https://aws.amazon.com/cloud9/?origin=c9io) and Visual Studio Code's Remote Development extension (https://code.visualstudio...

Setting up MERN stack technologies

MERN stack technologies are being developed and upgraded as this book is being written, so for the work demonstrated throughout this book, we use the latest stable versions at the time of writing. Installation guidelines for most of these technologies are dependent on the system environment of your workspaces, so this section points to all relevant installation resources and also acts as a guide for setting up a fully functioning MERN stack.

MongoDB

MongoDB must be set up, running, and accessible to your development environment before any database features are added to MERN applications. At the time of writing, the current stable version of MongoDB is 4.2.0, and this version of the MongoDB...

Checking your development setup

In this section, we will go through the development workflow and write code step by step to ensure that the environment is correctly set up to start developing and running MERN applications.

We will generate these project files in the following folder structure to run a simple setup project:

| mern-simplesetup/
 | -- client/
  | --- HelloWorld.js
  | --- main.js
 | -- server/
  | --- devBundle.js
  | --- server.js
 | -- .babelrc
 | -- nodemon.json
 | -- package.json
 | -- template.js
 | -- webpack.config.client.js
 | -- webpack.config.client.production.js
 | -- webpack.config.server.js

The code discussed in this section is available on GitHub in the repository at https://github.com/PacktPublishing/Full-Stack-React-Projects-Second-Edition/tree/master/Chapter02/mern-simplesetup. You can clone this code and run it as you go through the code explanations in the...

Summary

In this chapter, we discussed development tool options and how to install MERN technologies, and then we wrote code to check whether the development environment is set up correctly.

We began by looking at the recommended workspace, IDE, version control software, and browser options suitable for web development. You can select from these options based on your preferences as a developer.

Next, we set up the MERN stack technologies by first installing MongoDB, Node, and Yarn, and then adding the remaining required libraries using Yarn.

Before moving on to writing code to check this setup, we configured Webpack and Babel to compile and bundle code during development, and to build production-ready code. We learned that it is necessary to compile the ES6 and JSX code that is used for developing a MERN application before opening the application on browsers.

Additionally, we...