0

I am trying to create an extra page called pay instead of just having a homepage. I have seen this answer, Failed to lookup view "index" in views directory but it didn't help me. I added the app.get('/pay' part to try to render the same 'index' page before I add a new page. Weirdly when I go to the homepage, localhost:8080 it renders fine. But when I go to localhost:8080/pay, it gives

Error: Failed to lookup view "index" in views directory "/Users/kingf.wong/Development/moonshot/dist"
    at Function.render (/Users/kingf.wong/Development/moonshot/node_modules/express/lib/application.js:580:17)
    at ServerResponse.render (/Users/kingf.wong/Development/moonshot/node_modules/express/lib/response.js:1017:7)
    at /Users/kingf.wong/Development/moonshot/server.js:31:7
    at Layer.handle [as handle_request] (/Users/kingf.wong/Development/moonshot/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/kingf.wong/Development/moonshot/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/kingf.wong/Development/moonshot/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/kingf.wong/Development/moonshot/node_modules/express/lib/router/layer.js:95:5)
    at /Users/kingf.wong/Development/moonshot/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Users/kingf.wong/Development/moonshot/node_modules/express/lib/router/index.js:341:12)
    at next (/Users/kingf.wong/Development/moonshot/node_modules/express/lib/router/index.js:275:10)

I thought adding an extra page would be easy, by adding app.set('views',

Here is my server.js file

'use strict';

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

const app = express();


// Setup view engine
app.use(express.static(path.resolve(path.join(__dirname, '/dist'))));

app.set('views', path.resolve(path.join(__dirname, '/dist')));
app.set('view engine', 'pug');


app.get('/', (req, res) => {
  //console.log(path.resolve(path.join(__dirname, '/dist')));
  res.render('index');
  //res.send("Hello Root")
});

app.get('/pay', (req, res) => {
  res.render('index');
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});

and my project structure

moonshot/
 dist/
   bundle.js
   index.js
   index.html
   index.css

 server.js
 webpack.config.js

I have read it could be related to webpack as well, so here's my webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const DIST = path.resolve(__dirname, 'dist');

module.exports = {
  devtool: 'eval-source-map',
  mode: 'development',
  //entry: './src/index.js',
  entry: './server.js',
  output: {
    filename: 'bundle.js',
    path: DIST,
    publicPath: DIST,
  },
  devServer: {
    contentBase: DIST,
    port: 9011,
    writeToDisk: true,
  },
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

    // for build scripts
    new CopyPlugin({
      patterns: [
        {
          flatten: true,
          from: './src/*',
          globOptions: {
            ignore: ['**/*.js'],
          },
        },
      ],
    }),
  ],
  node: {
    __dirname: true,
    fs: 'empty'
  }
};
Kingvader Wong
  • 75
  • 1
  • 9
  • Since you set your view engine to pug, your views have to be in the [Pug](https://pugjs.org/) language and end with `.pug` instead of `.html`. If you don't want that remove the `app.set("views")` and `app.set("view engine")` commands and in `res.send` call it like so: `res.sendFile(path.join(__dirname, "dist", "index.html"))`. – code Jan 01 '22 at 16:48
  • Good point. That worked to an extent as my index.js stopped working. – Kingvader Wong Jan 01 '22 at 17:15
  • What's the error? – code Jan 01 '22 at 17:17
  • Sorry my bad, You made me realise I made a mistake in `webpack.config.js` entry, should be './src/index.js', which is the page that should be rendering for `/pay`. There was no error, just my `index.js` did not render the extension interaction I expected because the webpack only built server.js, not src/index.js I was hoping for. – Kingvader Wong Jan 01 '22 at 17:22

0 Answers0