mongodb-developer / mern-stack-example Goto Github PK
View Code? Open in Web Editor NEWMern Stack code for the Mern Tutorial
License: Apache License 2.0
Mern Stack code for the Mern Tutorial
License: Apache License 2.0
In the server.js file of our project, there's an essential component missing: the import statement for MongoDB connection. This oversight could potentially lead to runtime errors or issues when attempting to interact with the database.
Expected Behavior:
There should be an import statement for the MongoDB connection module/library.
Actual Behavior:
The import statement for MongoDB connection is missing.
Proposed Solution:
Server.js
import express from "express";
import cors from "cors";
import records from "./routes/record.js";
import dotenv from "dotenv"
import conn from "./db/connection.js"; //importing conn function from db/conncection.js file
const PORT = process.env.PORT || 5050;
const app = express();
dotenv.config();
app.use(cors());
app.use(express.json());
app.use("/record", records);
// start the Express server
app.listen(PORT, () => {
conn(); //add this for connecting to database
console.log(Server listening on port ${PORT}
);
});
Currently, our backend lacks a structured approach to data modeling, specifically the absence of schemas. This can lead to issues related to data consistency, validation, and ease of maintenance. To address this, I propose integrating schemas into our backend architecture.
The code example in navbar.js creates a navigation bar that displays the links.
When the browser window is small enough a button is displayed, but when the button is clicked the dropdown is not displayed.
please update the code in navbar.js to address this issue
Regards
Was attempting to update the components of this into React Hooks functional components instead of class components, but I'm a little new and am kind of confusing myself. Any chance for a react hooks version?
names do not match, in server/routes/record.js, within recordRoutes, names do not match names from client side, it should be
let myobj = {
person_name: req.body.name,
person_position: req.body.position,
person_level: req.body.level,
};
delete does not refresh the page with new records because it is not within a form. A form should be added.
Hi, getting this issue:
./src/components/edit.js
Attempted import error: 'withRouter' is not exported from 'react-router'.
I noticed package.json on a new project does not contain the following line: "react-router-dom": "^5.2.0", I guess this means if you follow instructions as per the blog: https://www.mongodb.com/languages/mern-stack-tutorial it does not uses the latest version.
I therefore made the code exactly like code files on Github but still getting this issue, please advise.
On the tutorial web page, the record.js offered uses person_name, person_group, person_level which do not map to the forms and cause display issues.
Also, the last line of the delete record uses:
response.status(obj); instead of response.json(obj) which prevents the recordList component from updating.
These will trip you up if you just try to "code along" and use the sample code from the tutorial web page. Code found here in github has these changes and works as expected.
In some cases "myFirstDatabase" is used, in others "employees" is used. Probably best to create a single process.env.DATABASE in config.env for consistency.
First of all, It happened on my personal copy of the project, so i went and pulled this repo and still get the same error.
Upon creating a new record, after clicking the "Create Person" button, it doesn't add the record. I get the 404 error in console, although, when I catch the error, it stills shows the 404 code with no additional information.
I tried to manually send HTTP requests via Postman and it prints "Cannot POST /record/add". Using GET on /records should list all records, yet it throws 200 OK and returns empty React page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--link rel="icon" href="/favicon.ico" /-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<!--script src="../src/index.js" ></script-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>
I don't know where it is the problem, but judging from the fact that I get it on both my own, and this freshly pulled repo, it seems that the tutorial itself has an error. I'd appreciate if someone could've looked at it.
When running the app, it opens to a blank screen on localhost:3000
This repository should be tagged with mongodb, nodeJS, react, etc and given a better description
Hi, I'm pretty new to this. I cloned the repo, but I get this error as soon as the client app loads:
TypeError: Cannot read properties of undefined (reading 'collection')
at C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\routes\record.js:19:6
at Layer.handle [as handle_request] (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:275:10)
at Function.handle (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:174:3)
at router (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\express\lib\router\index.js:47:12)
MongoServerSelectionError: connection to 35.232.129.9:27017 closed
at Timeout._onTimeout (C:\Users\anedf\Documents\GitHub\mern-stack-example\mern\server\node_modules\mongodb\lib\core\sdam\topology.js:439:30)
at listOnTimeout (node:internal/timers:559:17)
at processTimers (node:internal/timers:502:7) {
reason: TopologyDescription {
type: 'ReplicaSetNoPrimary',
setName: null,
maxSetVersion: null,
maxElectionId: null,
servers: Map(3) {
'ac-0bptifw-shard-00-00.9kna9aa.mongodb.net:27017' => [ServerDescription],
'ac-0bptifw-shard-00-01.9kna9aa.mongodb.net:27017' => [ServerDescription],
'ac-0bptifw-shard-00-02.9kna9aa.mongodb.net:27017' => [ServerDescription]
},
stale: false,
compatible: true,
compatibilityError: null,
logicalSessionTimeoutMinutes: null,
heartbeatFrequencyMS: 10000,
localThresholdMS: 15,
commonWireVersion: null
}
}
The only thing that I've changed is adding the config.env file. Does anyone know why this could be happening?
I've tried doing the How to Use MERN Stack: A Complete Guide but keep getting an error with the server/db/conn.js file on line 13:
_db = db.db("myFirstDatabase");
There error is:
TypeError: Cannot read property 'db' of undefined
Connecting via the Node code generated by Atlas works just fine. Also, I cloned the GitHub repo and get the exact same error. The actual function call is this:
connectToServer: function (callback) {
client.connect(function (err, db) {
_db = db.db("myFirstDatabase");
return callback(err);
console.log("Successfully connected to MongoDB.");
});
}
But, literally, nothing is getting assigned to the db
parameter when called. The Atlas connection code only has one parameter: err
.
I've tried this on both macOS 11.3.1 and Debion 10.9 and the exact same thing happens. Since it happens on the GitHub code, I know that I'm not the one causing it by accidentally doing something wrong. And, since the Atlas connection code works, I know that the URI is correct.
Please advise on what I need to do to fix this and then please update the website and GitHub with the information as well. Thank you!
Version Numbers:
Node: 14.17.0
Npm: 6.14.13
While this is easy to reproduce and you can get the error info yourself, here it is in all of its glory:
mern-stack-example/mern/server/node_modules/mongodb/lib/utils.js:691
throw error;
^
TypeError: Cannot read property 'db' of undefined
at mern-stack-example/mern/server/db/conn.js:14:16
at mern-stack-example/mern/server/node_modules/mongodb/lib/utils.js:688:9
at mern-stack-example/mern/server/node_modules/mongodb/lib/mongo_client.js:257:23
at connectCallback (mern-stack-example/mern/server/node_modules/mongodb/lib/operations/connect.js:365:5)
at mern-stack-example/mern/server/node_modules/mongodb/lib/operations/connect.js:552:14
at connectHandler (mern-stack-example/mern/server/node_modules/mongodb/lib/core/sdam/topology.js:286:11)
at cb (mern-stack-example/mern/server/node_modules/mongodb/lib/core/sdam/topology.js:684:18)
at mern-stack-example/mern/server/node_modules/mongodb/lib/cmap/connection_pool.js:348:13
at mern-stack-example/mern/server/node_modules/mongodb/lib/core/sdam/server.js:282:16
at Object.callback (mern-stack-example/mern/server/node_modules/mongodb/lib/cmap/connection_pool.js:345:7)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.