Hello! I am trying to create a personal website using the MERN stack. I am in the process of trying to create a password protected login to enter. My database and server is connected but I’m unable to see the webpage. It might have to do with my JS or JSX compatibility, images referenced and how the app is configured. Help is much needed!
App Component:
import ‘bootstrap/dist/css/bootstrap.min.css’;
import ‘./App.css’;
import Scrollable from ‘./components/Scrollable.jsx’;
import Footer from ‘./components/Footer’;
import Menu from ‘./components/Menu’;
import axios from ‘axios’;
axios.defaults.baseURL = ‘http://localhost:5173’;
axios.defaults.withCredentials = true;
function App() {
return (
)
}
export default App;
Package JSON:
{
“name”: “personalwebsite”,
“private”: true,
“version”: “1.0.0”,
“type”: “module”,
“scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“lint”: “eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0”,
“preview”: “vite preview”,
“start”: “nodemon vite.config.js”
},
“dependencies”: {
“@cyntler/react-doc-viewer”: “^1.15.0”,
“@react-pdf/renderer”: “^3.4.4”,
“axios”: “^1.7.2”,
“bcrypt”: “^5.1.1”,
“bootstrap”: “^5.3.3”,
“bootstrap-icons”: “^1.11.3”,
“cors”: “^2.8.5”,
“dotenv”: “^16.4.5”,
“express”: “^4.19.2”,
“mongodb”: “^6.6.2”,
“mongoose”: “^8.4.0”,
“nodemon”: “^3.1.1”,
“react”: “^18.2.0”,
“react-bootstrap”: “^2.10.2”,
“react-dom”: “^18.2.0”,
“react-icons”: “^5.2.1”,
“react-on-screen”: “^2.1.1”,
“react-pdf”: “^8.0.2”,
“react-router-dom”: “^6.23.0”
},
“devDependencies”: {
“@types/react”: “^18.2.66”,
“@types/react-dom”: “^18.2.22”,
“@vitejs/plugin-react”: “^4.2.1”,
“autoprefixer”: “^10.4.19”,
“eslint”: “^8.57.0”,
“eslint-plugin-react”: “^7.34.1”,
“eslint-plugin-react-hooks”: “^4.6.0”,
“eslint-plugin-react-refresh”: “^0.4.6”,
“postcss”: “^8.4.38”,
“tailwindcss”: “^3.4.3”,
“vite”: “^5.2.0”
},
“description”: “This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.”,
“main”: “vite.config.js”,
“keywords”: ,
“author”: “”,
“license”: “ISC”
}
Main.jsx:
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App.jsx’;
import { createBrowserRouter, RouterProvider } from ‘react-router-dom’;
import ‘./index.css’;
import Projects from ‘./components/Projects.jsx’;
import Project from ‘./pages/Project.jsx’;
import Resume from ‘./pages/Resume.jsx’;
import Login from ‘./pages/Login.jsx’;
import Error from ‘./pages/Error.jsx’;
const router = createBrowserRouter([
{
path: ‘/’,
element: ,
errorElement:
},
{
path: ‘/home’,
element: ,
errorElement:
},
{
path: ‘/projects’,
element: ,
children: [
{
path: ‘/projects/:projectId’,
element:
}
],
errorElement:
},
{
path: ‘/resume’,
element: ,
errorElement:
},
]);
ReactDOM.createRoot(document.getElementById(‘root’)).render(
<React.StrictMode>
<RouterProvider router = { router } />
</React.StrictMode>,
)
authRoutes:
import express from ‘express’;
import cors from ‘cors’;
import { test, loginUser } from ‘…/controllers/authController.js’;
import App from ‘…/App.js’;
const router = express.Router();
//middleware
router.use(
cors({
credentials: true,
origin: ‘http://localhost:8000’
})
);
router.get(‘/’, App);
router.post(‘/home’, );
router.post(‘/’, loginUser);
export default router;
authController:
import { comparePassword } from “…/helpers/auth.js”;
export function test (req, res) {
res.json(‘test is working’);
};
export async function loginUser (req, res) {
try {
const { password } = req.body;
//Check if match
const match = await comparePassword(password, user.password)
if(match) {
//assign webtoken to track throughout application
res.json('passwords match')
}
} catch (error) {
console.log(error)
}
};
export default {
test,
loginUser
}
//Login API Endpoint
vite.config.js:
import { defineConfig } from ‘vite’;
import react from ‘@vitejs/plugin-react’;
import express from ‘express’;
import dotenv from ‘dotenv’;
import cors from ‘cors’;
import axios from ‘axios’;
import testRouter from ‘./src/routes/authRoutes.js’;
import mongoose from ‘mongoose’;
dotenv.config();
const app = express();
//database connection
const connectDB = async () => {
try{
await mongoose.connect(process.env.MONGO_URL), {
useNewUrlParser: true,
useUnifiedTopology: true,
};
console.log(‘Database Connected’);
} catch (error) {
console.error(‘Database NOT Connected’, error.message);
}
};
// export default connectDB;
// mongoose.connect(process.env.MONGO_URL)
// .then(() => console.log(‘Database Connected’))
// .catch((err) => console.log(‘Database NOT Connected’, err))
connectDB();
app.use(‘/’, testRouter)
const port = 5173;
app.listen(port, () => console.log(Server is running on port ${port}));
// Configuring Vite | Vite
// export default defineConfig({
// plugins: [react({ include: /.(mdx|js|jsx|ts|tsx)$/ })],
// server: {
// port: 5173
// },
// connectDB
// });
export default defineConfig(() => ({
esbuild: {
loader: “tsx”, // OR “jsx”
include: [
“src//*.jsx",
"node_modules//*.jsx”,
],
},
}));