Use javascript as express view engine

Question

In my react app, I have currently set hbs as view engine. My Views folder has a few hbs files.

I have the following right now in my app js

// View engine
app.engine(
  'hbs',
  hbs({
    extname: 'hbs',
  })
)

app.set('view engine', 'hbs')

The problem: I want to use a UI framework such as material UI. I need to be able to use statements such as:

import Button from '@material-ui/core/Button';

This is not possible in handlebars I think. So I need to switch all my views to javascript. How can I get rid of hbs and use javascript in my views folder for pages?

Here is my sample home hbs view:

{{> nHeader }}



 <div class="fullscreen_cover cover1">
    <div class="welcomer">
        <h1 class="mb-3 lead">
            This is my home page
        </h1>

    </div>
  </div>


{{> footer }}

"use javascript in my views" What does that mean exactly? HBS is javasript. How is this a React app if it uses handlebars? — jmargolisvt
– jmargolisvt, Commented Aug 5, 2018 at 15:00
hbs is javascript ? I didint know that. See my hbs code above.. Does that look like js ? — AZSWQ
– AZSWQ, Commented Aug 5, 2018 at 15:18
If you need React for server templates then use it as view engine. It's not just 'javascript'. It's React app. — Estus Flask
– Estus Flask, Commented Aug 5, 2018 at 15:39

Willem van der Veen · Accepted Answer · 2018-08-05 15:06:55Z

1

You can't do this because this is impossible. What you actually want is to serve one HTML file with an associated bundle as a <script> tag which is your react app.

The users then loads this html file and the JS file(s). The JS bundle is your react app which is responsible for rerendering the DOM when the state of your application updates.

For the bundling you should use something like webpack.

answered Aug 5, 2018 at 15:06

Willem van der Veen

37.1k19 gold badges208 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

AZSWQ Over a year ago

I use webpack and bundle js for the rest of the javascripts. For the views I am using hbs.. All javascripts are bundled using webpack.. Can you please advise how I can change the views to javascript ? I cant imagine everyone is using a template engine...

Willem van der Veen Over a year ago

You can leave your viewengine at hbs. You just need to add your bundled scripts to your index.html and serve that when the user makes a request to your home URL

Willem van der Veen Over a year ago

View engine javascript doesn't exist, React uses no view engine it just uses JS under the hood to update the DOM and thus your user interface

AZSWQ Over a year ago

I see, So I should simply delete the views folder.. and take care of templating in my js files.. correct ? I added a sample of my home hbs.

Willem van der Veen Over a year ago

The templating is enterily done on the front end. When you send your index.html and react bundles to the client, the browser will render it on the frontend not on the backend. So there is no viewengine required.

|

Collectives™ on Stack Overflow

Use javascript as express view engine

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related