Developing, whilst seeing the changes update immediately is a feature which eases the programmer of any unplanned certainty as he or she gets to see the effect of each line of code on the frontend and backend. I'll be demonstrating how to setup a MERN project to run both the NodeJS and React servers concurrently. From hereon, I'll be referring to the backend as BE, frontend as FE and database as DB. I'll also be working from a linux environment. Not to worry, whenever ther's a command peculiar to linux, I'll indicate. Additionally, I'll be using yarn (Yet Another Resource Negootiator); you can as well use npm (node package manager). I'll always give the analogical comands for npm as well. Let's get started.
firstly, create a folder; I'll call mine projectOsmium.
a) cd into your project folder and create two folders like so;
mkdir {backend,frontend}
b) Acquiring the required files for the FE: cd into the frontend directory. I'll be working with typescript. Enter the command below to get a project structure with typescript template:
yarn create react-app <projectName> --template typescript
i.e yarn create react-app osmium --template typescript
c) Preparing package.json file to run both servers: cd out of the FE folder; you can simply do:
cd ..
Now lets get the required resources to run both servers.
i) Make a package.json file to hold our scripts, dependencies etc:
yarn init -y
or npm init-y
The above command will immediately create a package.json file for you. To add a tsconfig.json file, you'd enter:
tsc --init
The above command will create a tsconfig.json file for you.
However, the above command can only work, if you've got typescript installed. If you haven't, do:
yarn add -g typescript
d) Organising the tsconfig.json file:
the recommended key-value pair for the tsconfig.json file,is highlighted as below:
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
// "lib": [], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./backend/dist", /* Redirect output structure to the directory. */
"rootDir": "./backend/src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */
/* Module Resolution Options */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
"typeRoots": ["./backend/src/types", "../node_modules/@types"], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"exclude": ["../node_modules"],
"include": ["./backend/src"]
}
In the tsconfig.json file above, the rootDir and outDir are important. They tell typescript where to get the source codes and store the transpiled javascript files, respectively. Hence, in your BE folder, ensure you have created the src folder. Immediately you run the command "yarn dev", the "dist" folder will be created automatically.
e) Setting-up scripts to run servers: in your package.json file, create the scripts object and enter the following:
.....
"scripts": {
"client": "yarn start --prefix frontend",
"server": "nodemon ./backend/dist/index.js",
"dev": "rm -rf ./backend/dist/index.js && tsc && concurrently \"yarn server\" \"yarn client\",
"start": "node ./backend/dist/index.js"
}
.....
e) Adding the required devDependencies libraries:
the required devDependencies libraries can be gotten as shown below:
yarn add nodemon concurrently -D // the -D flag implies that the resources are devDependencies
You can now run:
yarn dev
Connect your DB and other resources.
Thank you for reading!
Top comments (0)