Boilerplate: App using EJS

What is this?

This is a boilerplate to keep you started with running EJS (or: Embedded JavaScript templating) on your computer. EJS is helpful when creating web-apps, web-servers and websites using Node.js and JavaScript.

In order to run it on your computer, you can clone this repository (after having forked it, if you want to store your progress on Github):

$ git clone https://github.com/HEAD-DigitalPool/ejs-app.git # or clone your own fork before
$ cd ejs-app
$ npm install
$ npm start

Your app should now be running on localhost:5001.

How does the code work?

You have two types of files: server and client files.

The server file is the index.js file, the client files are located in the:

views
	pages

The server file is composed as the following:

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

const PORT = process.env.PORT || 5001

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
	// here, the template index.ejs is read when accessed "/" 
  .get('/about', (req, res) => res.render('pages/about'))
	// here, the template about.ejs is read when accessed "/about" 
	// To create new 'pages', just follow the same logic
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))

The client files are composed as the following:

public
	stylesheets
		main.css (: this is where you can add your "global" css)

views
	pages
		index.ejs (: this is where you can add your "pages")
		about.ejs
	partials
		header.ejs (: embedded in each 'page', where the <title></title> - see below)

In each page, you can see how the header.ejs and the main.css are added:

<%- include ("../partials/header.ejs") %>

Then, the header.ejs looks like that:

<title>My ejs app</title>
<!-- This is where we instanciate the bootstrap css-->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<!-- This is where we instanciate jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- This is where we instanciate the bootstrap js-->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- This is where we call our styleshee  -->
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />

Deploying to Heroku

Using resources for this example app counts towards your usage. Delete your app and database as soon as you are done experimenting to control costs.

By default, apps use Eco dynos if you are subscribed to Eco. Otherwise, it defaults to Basic dynos. The Eco dynos plan is shared across all Eco dynos in your account and is recommended if you plan on deploying many small apps to Heroku. Learn more about our low-cost plans here.

Eligible students can apply for platform credits through our new Heroku for GitHub Students program.

$ heroku create
$ git push heroku main
$ heroku open

or

Documentation

For more information about using Node.js on Heroku, see these Dev Center articles:

• Getting Started on Heroku with Node.js
• Heroku Node.js Support
• Node.js on Heroku
• Best Practices for Node.js Development
• Using WebSockets on Heroku with Node.js