Home > Web Front-end > JS Tutorial > Express for Beginners: Create Your First Web App Today

Express for Beginners: Create Your First Web App Today

DDD
Release: 2024-09-21 20:30:03
Original
377 people have browsed it

Express for Beginners: Create Your First Web App Today

Creating an Express app involves several steps. Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. Below is a step-by-step guide to creating a basic Express app:

Step 1: Set Up Your Environment

  1. Install Node.js and npm: If you haven't already, download and install Node.js from nodejs.org. npm (Node Package Manager) comes bundled with Node.js.
  2. Create a Project Directory:

    mkdir my-express-app
    cd my-express-app
    
    
    Copy after login
  3. Initialize a New Node.js Project:

    npm init -y
    
    
    Copy after login

    This will create a package.json file with default settings.

Step 2: Install Express

Install Express using npm:

npm install express

Copy after login

Step 3: Create the Basic Server

  1. Create an Entry File: Create a file named app.js (or index.js).
  2. Set Up the Basic Server:

    const express = require('express');
    const app = express();
    const port = 3000;
    
    app.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    Copy after login

Step 4: Run the Server

Run your Express app using Node.js:

node app.js

Copy after login

Open your browser and navigate to http://localhost:3000. You should see "Hello World!" displayed.

Step 5: Add More Routes and Middleware (Optional)

You can add more routes and middleware to your Express app. For example:

  1. Add a Route:

    app.get('/about', (req, res) => {
      res.send('About Page');
    });
    
    
    Copy after login
  2. Use Middleware:

    const bodyParser = require('body-parser');
    
    app.use(bodyParser.json());
    
    app.post('/data', (req, res) => {
      const data = req.body;
      res.send(`Received data: ${JSON.stringify(data)}`);
    });
    
    
    Copy after login

Step 6: Organize Your Code (Optional)

For larger applications, it's a good practice to organize your code into separate modules.

  1. Create a Routes Directory:

    mkdir routes
    
    
    Copy after login
  2. Create a Route File: Create a file named index.js inside the routes directory.

    const express = require('express');
    const router = express.Router();
    
    router.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    router.get('/about', (req, res) => {
      res.send('About Page');
    });
    
    module.exports = router;
    
    
    Copy after login
  3. Update app.js to Use the Route File:

    const express = require('express');
    const app = express();
    const port = 3000;
    const indexRouter = require('./routes/index');
    
    app.use('/', indexRouter);
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    Copy after login

Step 7: Use Environment Variables (Optional)

For configuration settings, use environment variables.

  1. Install dotenv Package:

    npm install dotenv
    
    
    Copy after login
  2. Create a .env File:

    PORT=3000
    
    
    Copy after login
  3. Update app.js to Use dotenv:

    require('dotenv').config();
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 3000;
    const indexRouter = require('./routes/index');
    
    app.use('/', indexRouter);
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    Copy after login

That's it! You've created a basic Express app. You can expand this further by adding more routes, middleware, and other features as needed.

The above is the detailed content of Express for Beginners: Create Your First Web App Today. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template