Integrate node, express, and handlebars with a pre-existing, templated UX downloaded from Envato Elements.
A few fundamental changes, detailed below, were made to include a bare-bones HTML page:
- Create a
ux
folder within thepublic
directory where static assets are served. - Find the provided HTML template in the downloaded .zip file from Envato Elements.
- Copy and paste the following folders in your new
public/ux
directory:css
img
js
- Open
index.html
in your editor and copy the contents. - Open
main.handlebars
in theviews/layouts
folder. - Paste the contents
index.html
intomain.handlebars
. This should replace any previously existing HTML. - Update HTML with the appropriate file paths:
- Check
<script>
tags, updating thesrc
attribute, prependingux/
to the beginning of the string. - Check
<link>
tags, updating thehref
attribute, prependingux/
to the beginning of the string. - Check
<img>
tags, updating thesrc
attribute, prependingux/
to the beginning of the string.
- Check
- Add any additional CSS before the
</head>
tag. Add any additional JS files before the</body>
tag. - Save the file.
- Run
node server.js
to observe your new UX!
- Copy the "new page" template provided in
index.handlebars
- Paste the content into a new file named
pagename.handlebars
- Save the file and update your controllers accordingly!