Azure server can't find handlebars views

Question

I am using handlebars to generate html on my server and send it to my users when they land on my express routes. My route looks something like this :

userRouter.get(
    '/template-reset-password/:from',
    async (req: Request, res: Response) => {
        return res.status(200).render('reset-password', { data: req.data });
    },
);

I've setup my express server to accept handleBars files as my view engine. Here's the code I have in my index.ts file :

app.engine(
    'handlebars',
    engine({
        defaultLayout: false,
        layoutsDir: `${__dirname}/public/html`,
    }),
);
app.set('view engine', 'handlebars');
app.set('views', `${__dirname}/public/html`);

On my local machine when i try to access this route, my server send me the html normally and my server can find the directory where my handlebar files are stored. But when I use the same code on my staging server, which is hosted on azure, the server can't find the files and send me this error :

Error: Failed to lookup view "reset-password" in views directory "/usr/src/server/public/html"
    at Function.render (/usr/src/server/node_modules/express/lib/application.js:597:17)
    at ServerResponse.render (/usr/src/server/node_modules/express/lib/response.js:1039:7)
    at /usr/src/server/adapters/primary/routes/user.route.js:114:28
    at Generator.next (<anonymous>)
    at /usr/src/server/adapters/primary/routes/user.route.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/usr/src/server/adapters/primary/routes/user.route.js:4:12)
    at /usr/src/server/adapters/primary/routes/user.route.js:111:268
    at Layer.handle [as handle_request] (/usr/src/server/node_modules/express/lib/router/layer.js:95:5)
    at next (/usr/src/server/node_modules/express/lib/router/route.js:144:13)

I figured this probably has to do with my azure server config not accepting .handlebar files type, and sending me a "not found" error. Since I'm really new at azure I'd appreciate deep explanations on how to resolve this error. Thanks in advance.

EDIT : before my changes on the project there were html files that worked perfectly fine. But when I changed thoses file for .handlebars (also tried with .ejs extension) the files can't be accessed anymore on my azure server.

Answer 1

• The error message indicates that your Express application is unable to find the reset-password view in the specified views directory and handling the file paths and how it is configured to recognize .handlebars files.

• Check the file paths in your index.ts file. Azure environments can have different base directories, so you should use path.join to construct file paths. This ensures compatibility across different environments.

index.ts:

import express from 'express';
import path from 'path';
import { engine } from 'express-handlebars';

const app = express();

app.engine('handlebars', engine({
    defaultLayout: false,
    layoutsDir: path.join(__dirname, '..', 'public', 'html'), // Correct path handling
}));
app.set('view engine', 'handlebars');
app.set('views', path.join(__dirname, '..', 'public', 'html'));

// Import and use routes
import userRouter from './routes/user.route';
app.use('/user', userRouter);

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

• Ensure that the reset-password.handlebars file exists in the /public/html directory of your project.

user.route.ts:

import { Router, Request, Response } from 'express';

const userRouter = Router();

userRouter.get('/template-reset-password/:from', async (req: Request, res: Response) => {
    console.log('Views directory:', req.app.get('views')); // Logging the views directory
    console.log('Trying to render: reset-password');
    return res.status(200).render('reset-password', { data: req.params.from });
});

export default userRouter;

• Azure’s file system is case-sensitive. Ensure that the filename reset-password.handlebars exactly matches the case in your render call.
• Ensure that your deployment process correctly includes all necessary files.
• If deploying to Azure App Service on Windows, include a below web.config file in your project root.

web.config:

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".handlebars" mimeType="text/html" />
        </staticContent>
    </system.webServer>
</configuration>