Express-React Template

An express react template with tests to learn more about Javascript.

Run

To run the application first install all the dependencies

$ yarn install

• Start the db, I recommend to check the mongo configuration

$ yarn run db

• For development mode

Backend

$ yarn run build:back
$ yarn run start:back

Frontend

$ yarn run start

• or for production mode

$ yarn run build:project

To run the test or coverage, the test can be run without mongo installed on the machine

$ yarn run tests

Configuration

Mongo

Quick configuration to use mongod with authentication

$ mongod --dbpath "C:\dbpath"

In another console

$ mongod
> use admin
> db.createUser({user: 'username', pwd:'password', roles:[{role:'userAdminAnyDatabase',db: 'admin'}]})
> use <dbname>
> db.createUser({user: 'username', pwd:'password', roles:[{role:'readWrite',db: '<dbname>'}]})

Then we can restart the process of mongod using auth

$ mongod --auth --dbpath "C:\dbpath"

esLint and Prettier using airbnb standards

From Integrating Prettier + ESLint + Airbnb Style Guide in VSCode

1. Download the ESLint and Prettier extensions for VSCode.
2. Install the ESLint and Prettier libraries into our project. In your project’s root directory, you will want to run: npm install -D eslint prettier
3. Install the Airbnb config. If you’re using npm 5+, you can run this shortcut to install the config and all of its dependencies: npx install-peerdeps --dev eslint-config-airbnb
4. Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type) npm install -D eslint-config-prettier eslint-plugin-prettier
5. Create .eslintrc.json file in your project’s root directory:

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

6. Create .prettierrc file in your project’s root directory. This will be where you configure your formatting settings. I have added a few of my own preferences below, but I urge you to read more about the Prettier config file

{
  "printWidth": 100,
  "singleQuote": true
}

7. The last step is to make sure Prettier formats on save. Insert "editor.formatOnSave": true into your User Settings in VSCode.

Troubleshoot

Copy command - cp:front:dist

For linux and windows respectively

NOTE: Need testing on linux command

cp -R build/ dist/public
xcopy /e build dist\\public\\

RegeneratorRuntime is not defined

Babel 7 Users

Install this

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

and add this to babel config

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

References

Creating a Node Express-Webpack App with Dev and Prod Builds

To Handle Authentication With Node JS, Express, Mongo, JWT

A Practical Guide to JWT Authentication with NodeJS