Typescript does not load handlebar files

Question

I have the following directory structure :

src
|- server
  |- myServer.ts
  |- views
    |- myView.hbs
dist
|- server
  |- myServer.js

Note that there is no views folder in the dist folder (where the js sources compiled from typescript are). This is a problem because when I ask for the ../views/selectCoin.hbs from the javascript, there is nothing.

How do I export *.hbs files to javascript when typescript is compiled ?

why do you use outDir instead of just compiling js files in the same folder? This would completely solve the issue — smnbbrv, Jan 27 '18 at 23:08
Are you using webpack or gulp? Or just pure `tsc` to compile? — BrunoLM, Jan 27 '18 at 23:24

score 10 · Accepted Answer · answered Jan 27 '18 at 23:52

To tell handlebars where the views are you can configure it like this

app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, '../../src/server/views'));
app.engine('hbs', exphbs({
    defaultLayout: 'index',
    extname: 'hbs',
    layoutsDir: path.join(__dirname, '../../src/server/views/layouts'),
    partialsDir: path.join(__dirname, '../../src/server/views'),
}));

So it will look for views in the src folder.

Another option is to use ts-node instead of node. With it you don't need to compile your project and you don't need a dist folder, and you can configure it to look directly from where you are:

app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, 'views'));
app.engine('hbs', exphbs({
    defaultLayout: 'index',
    extname: 'hbs',
    layoutsDir: path.join(__dirname, 'views/layouts'),
    partialsDir: path.join(__dirname, 'views'),
}));

If you want to copy the views to the dist folder you could:

make a shell script to copy files
copy-webpack-plugin if using webpack
copy files with gulp if using gulp

The `ts-node` is the solution I choose. Didn't test the others. Thansk ! — Moebius, Jan 28 '18 at 12:11

Typescript does not load handlebar files

1 Answers1