Express Redirects

Introduction

Redirects are a crucial aspect of web development that allow you to guide users from one URL to another. In Express.js, redirects provide a way to navigate users to different routes or resources based on certain conditions or actions. Whether you need to redirect after a form submission, guide users to a login page, or update your URL structure, understanding redirects is essential for building robust Express applications.

In this guide, we'll explore how Express handles redirects, the different types of redirects available, and practical examples of implementing them in your applications.

Understanding HTTP Redirects

Before diving into Express redirects, let's understand what happens behind the scenes when a redirect occurs:

The client (browser) makes a request to your server
Your server responds with a redirect status code (typically 301, 302, 303, or 307)
The browser receives this response and automatically makes a new request to the specified location
The server responds to this new request with the content at that location

Redirect Status Codes

Different redirect status codes serve different purposes:

301 (Moved Permanently): The resource has been permanently moved to a new location
302 (Found): The resource is temporarily available at a different location
303 (See Other): The resource can be found at another URI using a GET method
307 (Temporary Redirect): Similar to 302, but requires that the request method and body stay the same

Basic Redirect Syntax in Express

Express makes redirecting simple with the redirect() method on the response object:

javascript
app.get('/old-page', (req, res) => {
  res.redirect('/new-page');
});

By default, Express uses a 302 status code for redirects.

Specifying a Status Code

You can specify a status code when redirecting:

javascript
app.get('/old-route', (req, res) => {
  // Permanent redirect with 301 status code
  res.redirect(301, '/new-route');
});

Redirect Types in Express

1. Relative Path Redirects

Redirect to a path relative to the current domain:

javascript
// Redirects to current-domain.com/dashboard
app.get('/home', (req, res) => {
  res.redirect('/dashboard');
});

2. Absolute Path Redirects

Redirect to a complete URL:

javascript
app.get('/external', (req, res) => {
  res.redirect('https://example.com');
});

3. Back Redirects

Redirect to the URL specified in the HTTP Referer header, or to the default URL if Referer is not present:

javascript
app.post('/submit-form', (req, res) => {
  // Process form
  // ...
  
  // Redirect back to the previous page, or to /home if no referrer
  res.redirect('back');
});

4. Dynamic Redirects

Redirect based on parameters or application logic:

javascript
app.get('/users/:id', (req, res) => {
  const { id } = req.params;
  
  if (userExists(id)) {
    res.redirect(`/user-profile/${id}`);
  } else {
    res.redirect('/users');
  }
});

Practical Examples

Redirect users to a dashboard after successful login:

javascript
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  
  // Authenticate the user
  authenticateUser(username, password)
    .then(user => {
      // Set session or token
      req.session.user = user;
      
      // Redirect to dashboard
      res.redirect('/dashboard');
    })
    .catch(error => {
      // If authentication fails, redirect back to login with error
      res.redirect('/login?error=Invalid+credentials');
    });
});

Example 2: Enforcing HTTPS

Redirect all HTTP requests to HTTPS:

javascript
app.use((req, res, next) => {
  if (req.headers['x-forwarded-proto'] !== 'https' && process.env.NODE_ENV === 'production') {
    return res.redirect(`https://${req.hostname}${req.url}`);
  }
  next();
});

Example 3: URL Shortener Service

A simple URL shortener that redirects short codes to full URLs:

javascript
// In-memory storage (in a real app, you'd use a database)
const urlMap = {
  'abc123': 'https://example.com/very/long/url/path',
  'def456': 'https://another-site.org/article/12345'
};

app.get('/s/:shortCode', (req, res) => {
  const { shortCode } = req.params;
  
  if (urlMap[shortCode]) {
    // Track the click for analytics (optional)
    recordClick(shortCode);
    
    // Permanent redirect to the destination URL
    return res.redirect(301, urlMap[shortCode]);
  }
  
  // If shortcode not found
  res.status(404).render('not-found');
});

Example 4: Language-Based Redirect

Redirect users based on their preferred language:

javascript
app.use((req, res, next) => {
  // Get accept-language header
  const language = req.headers['accept-language']?.split(',')[0] || 'en-US';
  
  // If user is at root path
  if (req.path === '/') {
    if (language.startsWith('es')) {
      return res.redirect('/es');
    } else if (language.startsWith('fr')) {
      return res.redirect('/fr');
    }
    // Default to English
    return res.redirect('/en');
  }
  
  next();
});

Handling Redirects in Frontend

When working with AJAX or API requests, be aware that your frontend code needs to handle redirects explicitly. The XMLHttpRequest and Fetch API don't automatically follow redirects across different domains, and the behavior can be configured.

Here's an example of handling a redirect in frontend JavaScript:

javascript
fetch('/api/data')
  .then(response => {
    if (response.redirected) {
      window.location.href = response.url;
    } else {
      return response.json();
    }
  })
  .then(data => {
    // Process data
  });

Common Redirect Patterns

Post/Redirect/Get (PRG) Pattern

This pattern helps prevent form resubmission when refreshing the page:

javascript
app.post('/create-resource', (req, res) => {
  // Process form data
  const id = createResource(req.body);
  
  // Redirect to the GET route for the new resource
  res.redirect(`/resources/${id}`);
});

Authentication Middleware Redirect

Redirect unauthenticated users to the login page:

javascript
function requireLogin(req, res, next) {
  if (req.session && req.session.user) {
    return next();
  }
  // Store original URL for post-login redirect
  req.session.returnTo = req.originalUrl;
  res.redirect('/login');
}

// Use the middleware on protected routes
app.get('/profile', requireLogin, (req, res) => {
  res.render('profile');
});

// After login, redirect to the originally requested URL
app.post('/login', (req, res) => {
  // Authentication logic
  // ...
  
  const returnTo = req.session.returnTo || '/dashboard';
  delete req.session.returnTo;
  res.redirect(returnTo);
});

Best Practices for Redirects

Use permanent redirects (301) carefully: Browsers cache these aggressively, so use them only when the move is truly permanent.
Avoid redirect chains: Multiple redirects slow down the user experience and waste resources.
Implement redirect logging: Track redirects to identify potential issues or optimization opportunities.

Handle query parameters appropriately: When redirecting, decide whether to preserve the original query parameters.

javascript
app.get('/old-search', (req, res) => {
  // Preserve query parameters
  res.redirect(`/new-search${req.url.substring(req.url.indexOf('?'))}`);
});

Set proper cache headers: For redirects that might change, ensure proper cache control.
Test redirects thoroughly: Ensure they work across different browsers and client types.

Summary

Express redirects are a powerful tool for guiding users through your application, handling URL changes, and implementing common web patterns. With the res.redirect() method, you can easily create redirects with different status codes for various scenarios.

Key takeaways:

Use res.redirect(url) for basic redirects
Specify status codes like res.redirect(301, url) for permanent redirects
Redirect to relative paths, absolute URLs, or back to the referrer
Implement patterns like Post/Redirect/Get to improve user experience
Use redirect middleware for authentication and other common scenarios

Exercises

Create a middleware that redirects mobile users to a mobile-optimized version of your site.
Implement a feature that redirects users to their preferred theme (light/dark) based on a cookie.
Build a simple A/B testing system that redirects users to different versions of a page.
Create a geographical redirect system that directs users to country-specific content based on their IP address.
Implement the PRG pattern for a form that creates a new resource.

Additional Resources

With these tools and patterns in your toolkit, you can implement sophisticated navigation flows and improve the user experience in your Express applications.

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction​

Understanding HTTP Redirects​

Redirect Status Codes​

Basic Redirect Syntax in Express​

Specifying a Status Code​

Redirect Types in Express​

1. Relative Path Redirects​

2. Absolute Path Redirects​

3. Back Redirects​

4. Dynamic Redirects​

Practical Examples​

Example 1: Post-Login Redirect​

Example 2: Enforcing HTTPS​

Example 3: URL Shortener Service​

Example 4: Language-Based Redirect​

Handling Redirects in Frontend​

Common Redirect Patterns​

Post/Redirect/Get (PRG) Pattern​

Authentication Middleware Redirect​

Best Practices for Redirects​

Summary​

Exercises​

Additional Resources​