{"id":2291,"date":"2022-01-26T09:24:09","date_gmt":"2022-01-26T09:24:09","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2291"},"modified":"2022-01-26T09:24:09","modified_gmt":"2022-01-26T09:24:09","slug":"the-efficient-way-to-create-a-mern-app","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2291","title":{"rendered":"The Efficient Way to Create a MERN App"},"content":{"rendered":"\n

Whether you are a newbie or an expert in the programming space, you\u2018ve probably wondered how others developers set up and configure their starting project application.<\/p>\n\n\n\n\n\n\n\n

This article tackles an efficient and intelligent way to set up a production-ready application. We will look into how to set up a MERN Stack application with tools, frameworks and modules that will allow us to manage the performance, styling, asynchrony, and other essential stuff we need to build a real-world application.<\/p>\n\n\n\n

Project Structure<\/h2>\n\n\n\n
\"\"\/
Project Structure<\/figcaption><\/figure>\n\n\n\n

Initializing package.json<\/em> and installing Node.js modules.<\/strong><\/h2>\n\n\n\n

First, create a new folder called mern-app-setup<\/strong>. <\/strong>Enter this folder and initialize our full stack application by entering and running this command in your terminal the command:<\/p>\n\n\n\n

npm init<\/em><\/pre>\n\n\n\n
You<\/em> will be asked a series of questions to gather meta-information about our project such as name, author and license. Then a package.json<\/em><\/strong> file will be auto generated with your answers and meta-information about the application as well as list of modules dependencies.<\/p>\n\n\n\n
Alternatively, you can also initialize it using yarn init<\/em><\/code> <\/em>if you are using yarn package manager. Before running theses commands make sure that you have already installed the latest Node.js<\/a> , npm<\/a> or yarn<\/a> on your local machine. Click on each of those links to know more about the process.<\/p>\n\n\n\n
Now, let us install all the necessary dependencies and devDependencies that we need. Open package.json<\/em><\/strong> file and modify the JSON object to add the key modules and dependencies.<\/p>\n\n\n\n
Dependencies:<\/p>\n\n\n\n
\"dependencies\": {
\"@hot-loader\/react-dom\": \"^17.0.1\",
\"express\": \"^4.17.2\",
\"react\": \"^17.0.2\",
\"react-dom\": \"^17.0.2\",
\"react-hot-loader\": \"^4.13.0\"
},<\/pre>\n\n\n\n
DevDependencies: Modify package.json<\/em><\/strong> further to add the following Node modules required during development as devDependencies:<\/p>\n\n\n\n
\"devDependencies\": {
\"@babel\/core\": \"^7.16.5\",
\"@babel\/preset-env\": \"^7.16.5\",
\"@babel\/preset-react\": \"^7.16.5\",
\"babel-loader\": \"^8.2.3\",
\"nodemon\": \"^2.0.15\",
\"webpack\": \"^5.65.0\",
\"webpack-cli\": \"^4.9.1\",
\"webpack-dev-middleware\": \"^5.3.0\",
\"webpack-hot-middleware\": \"^2.25.1\",
\"webpack-node-externals\": \"^3.0.0\"
}<\/pre>\n\n\n\n
Save the package.json and run npm install<\/em><\/code> from the command line to fetch and add all these modules to the project. With all the necessary modules installed and added to the project, next we will add configuration to compile and run a simple application.<\/p>\n\n\n\n
Note that you can also install all these modules manually on the command line and work with the latest versions modules dependencies but we use this method just in case you will be reading this article a year or two years from now, so you will have the same code base and modules versions here in case you want to follow along with us.<\/p>\n\n\n\n
Configuring Babel, Webpack and Nodemon<\/strong><\/h1>\n\n\n\n
Now, we will configure our application with Babel, Webpack and Nodemon to compile, bundle and auto-reload the changes in the code during the development. Before diving to these configurations, let us learn a few things about each module.<\/p>\n\n\n\n
What is Babel?<\/strong><\/h2>\n\n\n\n
Babel<\/a> is a JavaScript transcompiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones). It makes available all the syntactical sugar that was added to JavaScript with the new ES6 specification, including classes, fat arrows and multiline strings.<\/p>\n\n\n\n
What is Webpack?<\/strong><\/h2>\n\n\n\n
Webpack is a JavaScript code bundler that traverses the dependency graph of your project (chain of imports you use in your JS files), and creates a static JavaScript file(s) that is ready to be attached to your HTML.<\/p>\n\n\n\n
Configuring Babel<\/strong><\/h2>\n\n\n\n
Create a file named .babelrc<\/strong> in the root directory of the project and add the following JSON with presets and plugins specified:<\/p>\n\n\n\n
mern-app-setup\/.babelrc<\/em><\/strong><\/p>\n\n\n\n
{
  \"presets\": [
    [\"@babel\/preset-env\",
  {
    \"targets\": {
      \"node\": \"current\"
    }
  }
  ],
    \"@babel\/preset-react\"
  ],
  \"plugins\": [
    \"react-hot-loader\/babel\"
    ]
}<\/pre>\n\n\n\n
In this configuration, we specify that we need Babel to transpile the latest JavaScript syntax with support for code in a Node.js environment and also React\/JSX code. The react-hot-loader\/babel plugin is required by the react-hot-loader module to compile React components.<\/p>\n\n\n\n
Configuring Webpack<\/strong><\/h2>\n\n\n\n
First, we will have to configure Webpack to bundle both the client and server code and the client code separately for production.<\/p>\n\n\n\n
Create webpack.config.client.js<\/em><\/strong>, webpack.config.server.js<\/em><\/strong>, and webpack.config.client.production.js<\/em><\/strong> files in the project folder.<\/p>\n\n\n\n
All three files will have the following code structure, starting with imports, then the definition of the config object, and finally the export of the defined config object:<\/p>\n\n\n\n
const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()
const config = { ... }
module.exports = config<\/pre>\n\n\n\n
The config JSON object will differ with value specific to client or server-side code, and development versus production code.<\/p>\n\n\n\n
In the next sections, we will underline the relevant properties in each configuration instance.<\/p>\n\n\n\n
Client Side webpack configuration for development<\/strong><\/h2>\n\n\n\n
const config={
name: 'browser',
mode: 'development',
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware\/client?reload=true',
path.join(CURRENT_WORKING_DIR,'client\/index.js')
],
output:{
path: path.join(CURRENT_WORKING_DIR, '\/dist'),
filename: 'bundle.js',
publicPath: '\/dist\/'
},
module:{
rules: [
{
test: \/\\.jsx?$\/,
exclude: \/node_modules\/,
use: ['babel-loader']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
resolve:{
alias:{
'react-dom': '@hot-loader\/react-dom'
}
}
}<\/pre>\n\n\n\n
Now, let us explain each property and method added in this file:<\/p>\n\n\n\n