https://expressjs.com/
Express JS
Fast, unopinionated, minimalist web framework for Node.js
Install
$ npm install express --savev PS C:\nodeproject> npm install express --save
https://expressjs.com/en/starter/hello-world.html
https://mongoosejs.com/docs/
npm install mongoose --save
multer
npm install --save multer
http://expressjs.com/en/resources/middleware/multer.html
cors
CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.
https://www.npmjs.com/package/cors
PS C:\nodeproject>npm i cors
run PS C:\nodeproject> node index.js
index.js
//index.js
const express = require('express')
const mongoose = require('mongoose')
const cors = require('cors')
const multer = require('multer') //http://expressjs.com/en/resources/middleware/multer.html npm install --save multer
const UserModel = require('./User')
const app = express()
const port = 3000
const path = require('path') //https://expressjs.com/en/starter/static-files.html
app.use('/static', express.static(path.join(__dirname, 'public')))
app.use(cors())
app.use(express.json())
main().catch(err => console.log(err));
async function main() {
try {
await mongoose.connect('mongodb://127.0.0.1/nodeexpressdb', {});
console.log("CONNECTED TO DATABASE SUCCESSFULLY");
} catch (error) {
console.error('COULD NOT CONNECT TO DATABASE:', error.message);
}
}
const storage = multer.diskStorage({
destination: function(req, file, cb) {
return cb(null, "./public/images")
},
filename: function (req, file, cb) {
return cb(null, `${Date.now()}_${file.originalname}`)
}
})
const upload = multer({storage})
app.get('/hello', (req, res) => {
res.send('Hello World!')
})
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.body)
console.log(req.file)
return res.json({Status: "Success"});
})
app.post('/create',upload.single('file'), (req, res) => {
UserModel.create({
name: req.body.name,
email: req.body.email,
photo: req.file.filename
}).then(user => res.json(user))
.catch(err => res.json(err))
})
app.get('/', (req, res) => {
UserModel.find()
.then(users => res.json(users))
.catch(err => res.json(err))
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
User.js
//User.js
const mongoose = require('mongoose')
const UserSchema = new mongoose.Schema({
name: String,
email: String,
photo: String
})
const UserModel = mongoose.model("users", UserSchema)
module.exports = UserModel;
Next.js Install requirements
npm install axios
https://www.npmjs.com/package/axios
app\page.tsx
//app\page.tsx
import Link from "next/link";
import TableData from "@/components/tabledata";
import { Suspense } from "react";
import { Spinner } from "@/components/spinner";
export default function Home() {
return (
<div className="w-screen py-20 flex justify-center flex-col items-center">
<div className="flex items-center justify-between gap-1 mb-5">
<h1 className="text-4xl font-bold">Next.js 14 Node Express MongoDB Create with Upload File and List all data | TailwindCSS DaisyUI</h1>
</div>
<div className="overflow-x-auto">
<div className="mb-2 w-full text-right">
<Link
href="/user/create"
className="btn btn-primary">
Create
</Link>
</div>
<Suspense fallback={<Spinner />}>
<TableData/>
</Suspense>
</div>
</div>
);
}
components\tabledata.tsx
//components\tabledata.tsx
"use client";
import Image from 'next/image'
import React, { useEffect, useState } from "react";
import axios from 'axios' //npm install axios https://www.npmjs.com/package/axios
import Link from "next/link";
export default function Users() {
const [userData, setUSerData] = useState([]);
useEffect(() => {
fetchData();
}, [])
const fetchData = async () => {
try {
const result = await axios("http://localhost:3000/");
console.log(result.data);
setUSerData(result.data)
} catch (err) {
console.log("somthing Wrong");
}
}
return (
<table className="table table-zebra">
<thead className="text-sm text-gray-700 uppercase bg-gray-50">
<tr>
<th className="py-3 px-6">#</th>
<th className="py-3 px-6">Name</th>
<th className="py-3 px-6">Email</th>
<th className="py-3 px-6">Photo</th>
<th className="py-3 px-6 text-center">Actions</th>
</tr>
</thead>
<tbody>
{userData.map((rs, index) => (
<tr key={rs.id} className="bg-white border-b">
<td className="py-3 px-6">{index + 1}</td>
<td className="py-3 px-6">{rs.name}</td>
<td className="py-3 px-6">{rs.email}</td>
<td className="py-3 px-6">
<Image
//src="http://localhost:3000/static/images/cairocoders-ednalan.png"
src={`http://localhost:3000/static/images/${rs.photo}`}
width={100}
height={100}
alt="Photo"
/>
</td>
<td className="flex justify-center gap-1 py-3">
<Link
href="#"
className="btn btn-info">
View
</Link>
<Link
href="#"
className="btn btn-primary">
Edit
</Link>
<button className="btn btn-secondary">Delete</button>
</td>
</tr>
))}
</tbody>
</table>
);
}
components\spinner.tsx
//components\spinner.tsx
export const Spinner = () => {
return (
<span className="loading loading-spinner loading-lg"></span>
);
};
app\user\create\page.tsx
//app\user\create\page.tsx
"use client";
import React, { useState } from "react";
import axios from 'axios' //npm install axios https://www.npmjs.com/package/axios
const CreateUserPage = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [file, setFile] = useState()
const onSubmitUpload = async (e) => {
e.preventDefault();
try {
const formData = new FormData()
formData.append("name", name);
formData.append("email", email);
formData.append('file', file)
axios.post('http://localhost:3000/create',formData )
.then((response) => {
console.log(response);
window.location.href = '/';
})
.catch(er => console.log(er))
} catch (err) {
console.log("Something Wrong");
}
}
return (
<div className="max-w-md mx-auto mt-5">
<h1 className="text-2xl text-center mb-2">Add New User</h1>
<div>
<form>
<div className="mb-5">
<label htmlFor="name" className="block text-sm font-medium text-gray-900">
Full Name
</label>
<input
type="text"
name="name"
id="name"
className="input input-bordered input-primary w-full max-w-xs"
placeholder="Full Name..."
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mb-5">
<label htmlFor="email" className="block text-sm font-medium text-gray-900">
Email
</label>
<input
type="email"
name="email"
id="email"
className="input input-bordered input-primary w-full max-w-xs"
placeholder="Email..."
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-5">
<label className="block text-sm font-medium text-gray-900">
Upload File
</label>
<input type="file" onChange={(e) => setFile(e.target.files[0])} className="file-input file-input-bordered file-input-secondary w-full max-w-xs"/>
</div>
<button type="submit" className="btn btn-primary" onClick={e => onClick={e => onSubmitUpload(e)}>Add User</button>
</form>
</div>
</div>
);
};
export default CreateUserPage;
next.config.mjs
//next.config.mjs
/** @type {import('next').NextConfig} */
//const nextConfig = {};
const nextConfig = {
reactStrictMode: true,
images : {
domains : ['localhost', 'cairocoders.com'] // == Domain name
}
}
export default nextConfig;
run C:\nextjs>npm run dev https://github.com/cairocodes/Next.js-14-Node-Express-MongoDB-Create-with-Upload-File-and-List-all-data-TailwindCSS-DaisyUI
