Error: No default engine was specified and no extension was provided

# Table of Contents

# Error: No default engine was specified and no extension was provided

The Express.js error "No default engine was specified and no extension was provided" occurs when you use the res.render() method without setting a default view engine.

To solve the error, use the app.set() method to set a view engine, e.g. app.set('view engine', 'ejs');.

no default engine was specified and no extension was provided

If you're trying to send back a JSON response to the client, replace the following:

index.js

Copied!
res.render('home', {
  title: 'bobbyhadz.com',
  message: 'Example message: bobbyhadz.com',
  salary: 500,
  // ... some properties
});

The code for this article is available on GitHub

With the following:

index.js

Copied!
res.status(200)
res.json({
  title: 'bobbyhadz.com',
  message: 'Example message: bobbyhadz.com',
  salary: 500,
});

The res.render() method is used to render a view (HTML template) and send the rendered HTML string to the client.

The res.json() method is used to send a JSON response to the client.

The method sends a response with the Content-Type header set to application/json and converts the passed value to a JSON string using JSON.stringify().

# Configuring your default view engine correctly

If you meant to render a view (HTML template) and send back the rendered HTML string, to the client, make sure to configure your view engine correctly.

index.js

Copied!
import express from 'express';

// 👇️ if you use the CommonJS require() syntax
// const express = require('express');

const app = express();

// ✅ Configure EJS as your view engine
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('home', {
    title: 'bobbyhadz.com',
    message: 'Example message: bobbyhadz.com',
    salary: 500,
  });
});

const port = 5000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

The code for this article is available on GitHub

The code sample above uses the ES6 modules import/export to import express.

If you use the CommonJS require() syntax, use the following import statement instead.

index.js

Copied!
const express = require('express');

The example above assumes that you use ejs as your view (template) engine.

The error is resolved by adding the following line at the top of your entry point file (e.g. app.js or index.js).

index.js

Copied!
const app = express();

app.set('view engine', 'ejs');

Note that the line has to be added before any other route handlers.

Make sure that you have the ejs module installed.

shell

Copied!
# if you need to generate a package.json file
npm init -y

# 👇️ with NPM
npm install express ejs

# or with YARN
yarn add express ejs

Now create a home.ejs file in views/home.ejs.

views/home.ejs

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>
  <body>
    <h2>bobbyhadz.com</h2>

    <h2><%= message %></h2>

    <h2><%= salary %></h2>
  </body>
</html>

The code for this article is available on GitHub

Start your Express.js server with npx nodemon index.js and visit http://localhost:5000.

shell

Copied!
npx nodemon index.js

view template loaded successfully

By default, Express.js looks for your template files in a views/ directory.

We passed home as the first argument to the res.render() method and set the view engine to ejs, so Express will look for a views/home.ejs file.

index.js

Copied!
app.get('/', (req, res) => {
  res.render('home', {
    title: 'bobbyhadz.com',
    message: 'Example message: bobbyhadz.com',
    salary: 500,
  });
});

The example assumes that you use the following folder structure.

index.html

Copied!
my-project/
  └── index.js
  └── views/
    └── home.ejs

As previously noted, Express will look for your template files in a views/ directory.

You can use the app.set() method if you need to specify a different path to your template files.

Here is the default.

index.js

Copied!
app.set('views', './views');

We used ejs as the template engine in the example, however, the same approach can be used to set any other view engine.

For example, if you want to use pug as your view engine:

Install the pug module.

shell

Copied!
# with NPM
npm install pug

# or with YARN
yarn add pug

Create a views/home.pug file.

views/home.pug

Copied!
html
  head
    title= title
  body
    h1= message
    h2= salary

Update your index.js (or app.js) file as follows.

index.js

Copied!
import express from 'express';

// 👇️ if you use CommonJS
// const express = require('express')

const app = express();

// ✅ Using the `pug` template engine
app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('home', {
    title: 'bobbyhadz.com',
    message: 'Example message: bobbyhadz.com',
    salary: 500,
  });
});

const port = 5000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

The code for this article is available on GitHub

Start your Express.js server with npx nodemon index.js and visit http://localhost:5000.

shell

Copied!
npx nodemon index.js

pug view engine configured correctly

# If you need to send back an HTML file, use the `res.sendFile` method

If you need to send back a basic .html file, use the res.sendFile method.

Suppose that you have the following folder structure.

shell

Copied!
my-project/
  └── index.js
  └── index.html

Here is the code for the index.html file.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>
  </body>
</html>

The code for this article is available on GitHub

And, here is the code for the index.js file.

index.js

Copied!
import express from 'express';
import path from 'path';

import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

const port = 5000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

The example uses the ES6 modules import/export syntax.

If you use CommonJS require(), use the following code snippet instead.

index.js

Copied!
const express = require('express');
const path = require('path');

const app = express();


app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

const port = 5000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

The code for this article is available on GitHub

We passed the path to the index.html file to the res.sendFile() method to send back an HTML file to the client.

I've written a detailed guide on how to use res.sendFile in Express.js.

# Using the `res.send()` method instead

You can also use the res.send() method in your route handlers.

For example, you could send a JSON response with the following line.

index.js

Copied!
res.send({
  site: 'bobbyhadz.com',
  age: 30,
  topic: 'Express.js',
})

You can also use the res.send() method to send back an HTML string.

index.js

Copied!
res.send('<h2>bobbyhadz.com</h2>')

You can also specify the status code.

index.js

Copied!
res.status(404).send('Page not found!')

Or with a JSON response:

index.js

Copied!
res.status(500).send({
  error: 'Something went wrong',
})

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Error: No default engine was specified and no extension was provided

# Table of Contents