Forem: Mohd Suhel

🚀 Deploy a MERN Full Stack Website for Free : full guide

Mohd Suhel — Sun, 05 Jan 2025 07:30:38 +0000

Deploying a full-stack MERN (MongoDB, Express.js, React, Node.js) project for free is easier than you think! With Render and Netlify, you can host both backend and frontend at no cost. This guide walks you through setting up the project, deploying it, and connecting the backend and frontend seamlessly.

Project Setup: MERN Stack with Vite React

1. Backend Setup

Create a Backend Folder:

mkdir backend cd backend

Initialize Node.js:

npm init -y
npm install express mongoose cors dotenv
npm install --save-dev nodemon

Environment Variables (.env): In the backend folder, create a .env file:

PORT=5000
MONGO_URI=your_mongodb_connection_string

2. Frontend Setup with Vite React

Create a Vite React App:

mkdir frontend
cd frontend
npm create vite@latest . --template react
npm install

Environment Variables (.env): Create a .env file in the frontend folder:

VITE_BACKEND_URL=http://localhost:5000

Project Structure

mern-project/  
│  
├── backend/  
│   ├── controllers/        # For handling business logic (e.g., userController.js)  
│   ├── models/             # MongoDB schemas (e.g., User.js)  
│   ├── routes/             # API routes (e.g., userRoutes.js)  
│   ├── .env                # Environment variables  
│   ├── index.js            # Entry point for the backend  
│   ├── package.json        # Backend dependencies  
│   └── README.md           # Backend-specific documentation  
│  
├── frontend/  
│   ├── public/             # Public files (e.g., index.html)  
│   ├── src/  
│   │   ├── components/     # Reusable components (e.g., Header.jsx, Footer.jsx)  
│   │   ├── pages/          # Pages (e.g., Home.jsx, Login.jsx)  
│   │   ├── styles/         # CSS/SCSS files  
│   │   ├── App.jsx         # Main app file  
│   │   ├── main.jsx        # ReactDOM render  
│   │   └── .env            # Frontend environment variables  
│   ├── vite.config.js      # Vite configuration  
│   ├── package.json        # Frontend dependencies  
│   └── README.md           # Frontend-specific documentation  
│  
└── README.md               # Main documentation for the entire project

🌐 Deploying the Backend on Render

1. Push Backend to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/backend-repo.git
git push -u origin main

2. Deploy on Render:

`Log in to Render.

Create a New Web Service.

Connect your GitHub repository.`

Set the following:

Build Command:

npm install

Start Command:

node index.js

Add environment variables (e.g., MONGO_URI) under Settings > Environment Variables.

3. Copy the Render URL: Once deployed, you’ll get a URL (e.g., https://your-backend.onrender.com).

🌐 Deploying the Frontend on Netlify

1. Build the Frontend:

npm run build

2. Push Frontend to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/frontend-repo.git
git push -u origin main

3. Deploy on Netlify:

Create a New Site.

Connect your GitHub repository.

Set:

Build Command:

npm run build

Publish Directory:

dist

🔗 Connecting Frontend and Backend

1. Update the .env file in your frontend folder:

VITE_BACKEND_URL=https://your-backend.onrender.com

2. Rebuild and redeploy the frontend on Netlify:

npm run build

Testing the Application

Open the Netlify URL for your frontend.

Interact with your application and ensure everything works as expected.

Debug any issues using Render logs or browser developer tools.

🎯 Key Tips for a Smooth Deployment

Monitor API Requests: Use tools like Postman to test backend endpoints.
Keep Environment Variables Secure: Avoid hardcoding secrets in your code.
Optimize Build Performance: Use production settings for builds (e.g., NODE_ENV=production).

🙌 Conclusion

With Render and Netlify, deploying a MERN stack project is quick, free, and efficient. Follow this guide to have your project live in no time.

If you found this helpful, drop a comment or share it with your fellow developers!

Have questions or feedback? Let me know!

How to Optimize Your React Web App: 7 Essential Steps

Mohd Suhel — Fri, 20 Dec 2024 03:34:42 +0000

React is a powerful library for building dynamic user interfaces, but performance issues can arise as your application grows. In this guide, we’ll explore 7 essential steps to optimize your React web app and ensure it runs smoothly.

1. Use React’s Built-in Performance Tools

React offers several tools to help you identify and resolve performance bottlenecks:

React Developer Tools:

Use the Profiler tab to measure how components render and identify unnecessary renders.

React Strict Mode:

Enable strict mode to catch potential performance and coding issues during development.

Tip: Wrap your app in React.StrictMode to surface warnings about inefficient patterns.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. Optimize Component Rendering

Unnecessary re-renders can drastically slow down your app. You can optimize component rendering by:

Using React.memo: Prevent functional components from re-rendering when their props don’t change.

import React, { memo } from 'react';

const MyComponent = ({ data }) => {
  console.log('Rendering MyComponent');
  return <div>{data}</div>;
};


export default memo(MyComponent);

Using useCallback and useMemo:

Use useCallback to memoize functions.

Use useMemo to memoize computationally expensive operations.



import React, { useCallback, useMemo } from 'react';

const App = ({ numbers }) => {
  const calculateSum = useMemo(() => numbers.reduce((a, b) => a + b, 0), [numbers]);
  const handleClick = useCallback(() => console.log('Clicked!'), []);

  return (
    <div>
      <h1>Sum: {calculateSum}</h1>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

3. Code-Splitting with React.lazy

Reduce your initial load time by splitting your app into smaller bundles using React.lazy and Suspense.

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
};

export default App;

4. Avoid Inline Functions and Anonymous Functions

Inline functions create new references every render, which can cause unnecessary re-renders. Instead, define functions outside the render logic or use useCallback.

Bad Practice:

<button onClick={() => console.log('Clicked!')}>Click Me</button>

Good Practice:

const handleClick = () => console.log('Clicked!');
<button onClick={handleClick}>Click Me</button>;

5. Reduce State and Props Drilling

Avoid excessive state updates and unnecessary props drilling:

Use Context API or state management libraries like Redux or Zustand for managing global state.

Split components into smaller, focused components that manage their own state.

6. Optimize Images and Assets

Large images and assets can slow down your app. Here’s how to optimize them:

Use tools like ImageOptim or TinyPNG to compress images.

Use responsive images with the srcset attribute or libraries like react-image.

Lazy-load images using libraries like react-lazyload.

7. Minimize Dependencies

Audit your package.json for unnecessary dependencies. Large bundles can slow down your app.

Use tools like Bundlephobia to analyze the size of dependencies.

Prefer lightweight alternatives or custom solutions.

Bonus

Use a Performance Monitoring Tool

Leverage tools like Lighthouse, Sentry, or Datadog to monitor and debug performance issues in production.

Conclusion

Optimizing your React web app is a continuous process. Start by identifying performance bottlenecks with React tools and progressively apply these techniques. By following these steps, you’ll deliver a faster, more efficient user experience.

If you found this guide helpful, feel free to share your optimization tips in the comments below!