notes

-- install JSON server --
npx json-server --port 3001 --watch db.json

npm install axios

-- Install json-server as a development dependency (only used during development) --
npm install json-server --save-dev

to package.json -> "server": "json-server -p3001 --watch db.json"

npm run server


-- create a new template for application --
npm init

node index.js //run app 


-- express --
npm install express

-- nodemon --
npm install --save-dev nodemon

node_modules/.bin/nodemon index.js //start app with nodemon
npm run dev //after adding "dev": "nodemon index.js", script to package.json

-- postman --
https://www.postman.com/downloads/
-- rest client --
https://marketplace.visualstudio.com/items?itemName=humao.rest-client

overriding default NOT FOUND message for http status (404)
https://stackoverflow.com/questions/14154337/how-to-send-a-custom-http-status-message-in-node-express/36507614#36507614


-- cors -- 
npm install cors

https://fullstackopen-notes-fglsn.herokuapp.com/

== heroku subtree ==
https://dev.to/crrojas88/deploying-a-git-subdirectory-to-heroku-23ld
git subtree push --prefix part03/phonebook-back heroku main

npm install mongoose

== phonebook: ==
heroku git:remote -a fullstackopen-phonebook-fglsn
heroku config:set MONGODB_URI="mongodb+srv://<username>:<password>@cluster0.rxxdbit.mongodb.net/phonebookApp?retryWrites=true&w=majority"
git subtree push --prefix part03/phonebook-back heroku main


== notes == 
heroku git:remote -a fullstackopen-notes-fglsn
heroku config:set MONGODB_URI="mongodb+srv://<username>:<password>@cluster0.yitvnyc.mongodb.net/noteApp?retryWrites=true&w=majority"
git subtree push --prefix theory/part3 heroku main

== ESlint ==
back:
npm install eslint --save-dev
npx eslint --init

to package.json scripts section:
	"lint": "eslint .",
	"lint:fix": "npx eslint . --fix"

front: 
npm install --save-dev eslint-plugin-jest


testing lib
== jest ==
__Back__
	npm install --save-dev jest

into to scripts of package.json : 
	"test": "jest --verbose"

to the end of package.json :
	"jest": {
	"testEnvironment": "node"
	}

to "env" section of eslintrc.js : 
	'jest': true,

(** to run one test, use for.ex : 
	npm test -- tests/blog_api.test.js
or	
	npm test -- -t 'test desc/name' )

__Front__
==test-lib==
	npm install --save-dev @testing-library/react @testing-library/jest-dom

run tests in 'normal mode'
	CI=true npm test

==user-event lib==
	npm install --save-dev @testing-library/user-event

// If there is a mismatch between the version of a dependency 
	jest-watch-typeahead that create-react-app and user-event are using:
		npm install -D --exact jest-watch-typeahead@0.6.5

(	at least starting from macOS Sierra, running tests in watch mode issues some warnings to the console, that can be removed by installing Watchman. 
	https://facebook.github.io/watchman/
)

__End to end__
==cypress==
	npm install --save-dev cypress

	to package-json scripts:			"cypress:open": "cypress open"
	to backend package.json scripts:	"start:test": "cross-env NODE_ENV=test node index.js"

		npm install eslint-plugin-cypress --save-dev
	to .eslintrc.js 'env':		"cypress/globals": true
	to .eslintrc.js 'plugins:	"cypress"

	list of the most common assertions which can be used with should
	https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions
	https://github.com/cypress-io/cypress/issues/9349
_____

== supertest ==
npm install --save-dev supertest

==  express-async-errors library ==

npm install express-async-errors

into app.js add : require('express-async-errors')


Creating users:

== bcrypt ==
npm install bcrypt

== jsonwebtoken ==
npm install jsonwebtoken

(If the application has multiple interfaces requiring identification, JWT's validation should be separated into its own middleware. Some existing library like express-jwt could also be used. )



==logout==
	window.localStorage.removeItem('loggedNoteappUser')
or with the command which empties localstorage completely:
	window.localStorage.clear()

== prop-types == 
npm install prop-types


__Redux__

npm install redux

npm install --save-dev deep-freeze

npm install react-redux

npm install @reduxjs/toolkit

https://chrome.google.com/webstore/detail/redux-devtools/lmThkpmbekcpmknklioeibfkpmmfibljd/related

npm install redux-thunk

__Router__

npm install react-router-dom

__HOOKS__
https://fullstackopen.com/en/part7/custom_hooks

__Bootstrap__

npm install react-bootstrap

to head tag of pubic/index.html:
  <link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
	crossOrigin="anonymous"
  />

__MUI__
npm install @mui/material @emotion/react @emotion/styled
to head:

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

other ui frameworks:
https://react.semantic-ui.com/
https://bulma.io/
https://ant.design/
https://get.foundation/
https://chakra-ui.com/
https://tailwindcss.com/
https://semantic-ui.com/
https://mantine.dev/
https://react.fluentui.dev/


npm install styled-components
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates

__Check dependencies && Security__
npm outdated --depth 0

	"The dependencies can be brought up to date by updating the file package.json. The best way to do that is by using a tool called npm-check-updates. It can be installed globally by running the command"

	npm install -g npm-check-updates

	The file package.json is brought up to date by running the command ncu -u.
	ncu -u

	npm audit
	npm audit fix

	The documentation for Express includes a section on security: Production Best Practices: Security, which is worth a read through. It is also recommended to add a library called Helmet to the backend. It includes a set of middlewares that eliminate some security vulnerabilities in Express applications.

Using the ESlint security-plugin is also worth doing.

https://fullstackopen.com/en/part7/class_components_miscellaneous

npm install --save-dev --save-exact prettier