jaewonhimnae / boilerplate-mern-stack

Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX

Hello, My Friends
Thank you for having interest in this repository !

To use this application,

1. make dev.js file inside config folder
2. put mongoDB info into dev.js file
3. Type " npm install " inside the root directory ( Download Server Dependencies )
4. Type " npm install " inside the client directory ( Download Front-end Dependencies )

If you have problem, feel free to ask me ^^

You can watch the tutorial for this app.

https://www.youtube.com/channel/UCFyXA9x8lpL3EYWeYhj4C4Q?view_as=subscriber

boilerplate-mern-stack's Issues

Cannot find module './dev'

Hi today i got this error do you know what is the problem?
` [email protected] start C:\Users\Casper\Desktop\boilerplate-mern-stack-master

node server/index.js

internal/modules/cjs/loader.js:834
throw err;
^

Error: Cannot find module './dev'
Require stack:

• C:\Users\Casper\Desktop\boilerplate-mern-stack-master\server\config\key.js
• C:\Users\Casper\Desktop\boilerplate-mern-stack-master\server\index.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
  at Function.Module._load (internal/modules/cjs/loader.js:687:27)
  at Module.require (internal/modules/cjs/loader.js:903:19)
  at require (internal/modules/cjs/helpers.js:74:18)
  at Object. (C:\Users\Casper\Desktop\boilerplate-mern-stack-master\server\config\key.js:4:22)
  at Module._compile (internal/modules/cjs/loader.js:1015:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
  at Module.load (internal/modules/cjs/loader.js:879:32)
  at Function.Module._load (internal/modules/cjs/loader.js:724:14)
  at Module.require (internal/modules/cjs/loader.js:903:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  'C:\Users\Casper\Desktop\boilerplate-mern-stack-master\server\config\key.js',
  'C:\Users\Casper\Desktop\boilerplate-mern-stack-master\server\index.js'
  ]
  }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] start: node server/index.js
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] start script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.`

× Error: Cannot find module './locale'

getting error when running the client

Cannot POST / from form

Hi, I'm quite new to this. I am trying to create a form in the client side with POST. and send that to an email using nodemailer but whenever I try to do this I get cannot POST /.

I add this in index.js to the server side: and client side form has POST with action="/contactMail"
AM I DOING ANYTHING WRONG?

`const transport = nodemailer.createTransport({
service: 'gmail',
auth: {
user: '',
pass: ''
}
});

function sendEmail(mail){
var mailOptions = {
from: '',
to: mail.to,
subject: mail.subject,
html: mail.body
}

transporter.sendMail(mailOptions, function(err, info){
if (err){
console.log(err)
} else {
console.log("email sent: " + info.response)
}
})
}

app.post('/contactMail', (req, res) => {
mail = {
to: req.body.email,
subject: req.body.name,
body: req.body.message
}
sendEmail(mail)
res.redirect('/contact')
});`

When I submit the details it is not sumbitted

I followed your video and all the steps correctly but still it is not working

I CANT INSTALL npm install at the server side

[email protected] install C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt
node-pre-gyp install --fallback-to-build

node-pre-gyp WARN Using needle for node-pre-gyp https download
node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v83-win32-x64-unknown.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v83 ABI, unknown) (falling back to source compile with node-gyp)
gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS checking VS2017 (15.9.28307.1177) found at:
gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools"
gyp ERR! find VS - found "Visual Studio C++ core features"
gyp ERR! find VS - found VC++ toolset: v141
gyp ERR! find VS - missing any Windows SDK
gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack at VisualStudioFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16
gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
gyp ERR! stack at ChildProcess.exithandler (child_process.js:310:5)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at maybeClose (internal/child_process.js:1051:16)
gyp ERR! System Windows_NT 10.0.18362
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt\lib\binding\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt\lib\binding" "--napi_version=6" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v83"
gyp ERR! cwd C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt
gyp ERR! node -v v14.4.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt\lib\binding --napi_version=6 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1)
node-pre-gyp ERR! stack at ChildProcess. (C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:315:20)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1051:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
node-pre-gyp ERR! System Windows_NT 10.0.18362
node-pre-gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\node-pre-gyp\bin\node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt
node-pre-gyp ERR! node -v v14.4.0
node-pre-gyp ERR! node-pre-gyp -v v0.14.0
node-pre-gyp ERR! not ok
Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib
--module_path=C:\Users\solom\Desktop\ONLINE-SHOP\node_modules\bcrypt\lib\binding --napi_version=6 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1)
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-pre-gyp install --fallback-to-build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\solom\AppData\Roaming\npm-cache_logs\2020-06-29T04_56_51_831Z-debug.log

Have no access to PR

I find a spell wrong issue in files, can u give an access right to PR? or just report the bug to u directly

Login rememberme posts undefined in the email input box

In the login component when clicking remember me and submitting the form, is saving values.id instead of the email into the localStorage

client\src\components\views\LoginPage\LoginPage.js
line: 51
window.localStorage.setItem('rememberMe', values.id);

I changed to this and now it works fine:

window.localStorage.setItem('rememberMe', values.email);

why did you use a tag instead of link ?

boilerplate-mern-stack/client/src/components/views/LoginPage/LoginPage.js

Line 137 in 0f8071c

Or <a href="/register">register now!</a>

'Icon' is not exported from 'antd'

'Icon' is not exported from 'antd'

from Footer.js, LoginPage.js, NavBar.js

There are 2 return statement under functional component please clarify this mystery

boilerplate-mern-stack/client/src/components/views/LoginPage/LoginPage.js

Line 24 in 0f8071c

return (

Cannot GET /

When I connect to localhost:5000 it can't reach / or any other routes. I however did something different than what was mentioned in the README file. I hard coded my MongoDB URL into the mongoose constructor at server/index.js file, instead of doing it from the config folder. It console logged both "MongoDB connected" and "server connected at 5000". But I can't access any of the routes.

What have you used to scaffold front-end side?

Hi, John. I need to do a project of a chat, and I'll base into yours, but I need to know what have you used to scaffold front-end side? Have you used create-react-app ?

Regards.

module not found error

i get this error after npm install

code: 'MODULE_NOT_FOUND',
requireStack: [
'D:\web\blog1\node_modules\bcrypt\bcrypt.js',
'D:\web\blog1\server\models\User.js',
'D:\web\blog1\server\routes\users.js',
'D:\web\blog1\server\index.js'

highlightjs required following Youtube Quill tutorial 1

What is the difference between in these two codes

return (
    <Menu mode={props.mode} theme={props.theme}>
      {user.userData && !user.userData.isAuth ? (
        <Menu.Item key="logout">
          <a onClick={logoutHandle}>Logout</a>
        </Menu.Item>
      ) : (
        <>
          <Menu.Item key="login" onItemHover={() => console.log('hover')}>
            <a href="/login">Signin</a>
          </Menu.Item>
          <Menu.Item key="signup" onItemHover={() => console.log('hover')}>
            <a href="/login">Signup</a>
          </Menu.Item>
        </>
      )}
    </Menu>
  )

if (user.userData && !user.userData.isAuth) {
		return (
			<Menu mode={props.mode}>
				<Menu.Item key="logout">
					<a onClick={logoutHandler}>Logout</a>
				</Menu.Item>
			</Menu>
		)
	} else {
		return (
			<Menu mode={props.mode}>
				<Menu.Item key="mail">
					<a href="/login">Signin</a>
				</Menu.Item>
				<Menu.Item key="app">
					<a href="/register">Signup</a>
				</Menu.Item>
			</Menu>
		)
	}

the below is the author's source code and the first one is mine and it renders wiered ,the css seems not work

I don't understand the validation about register module,

if (user.isModified('password')) {
		bcrypt.genSalt(10, (err, salt) => {
			if (err) return next(err)
			bcrypt.hash(user.password, salt, (err, hash) => {
				if (err) return next(err)
				user.password = hash
				next()
			})
		})
	} else {
		next()
	}

I can't understand why use isModified to judge if there's already have the account,

"CAN'T SIGN IN" and "CAN'T UPLOAD IMAGES"

PLEASE I NEED HELP!!!!!!!!!!!

first i can't sign in, so i just clicked on 'sign in' and then clicked on 'forgot password'. this way i got to see the development.

whenever i try to upload an image i get this log on my terminal

[HPM] Error occurred while trying to proxy request /api/product/uploadImage from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Cannot register from client or server.

Whenever I try to submit with information (I have my mongodb connected): It gives this error
[HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

on the browser, it shows a 504 error.

All I did was to npm install in client and root and added dev.js with
mongodb://<Username>:<password>@<ClusterInfo>/<dbname>?ssl=true&replicaSet=<ClusterName>&authSource=admin&retryWrites=true&w=majority

and ran npm run dev

not sure where I am wrong, can you help me on this.