- Install the EJS language support extension for VS Code.
- Open a terminal window and type
yarn install
- Start up the server by typing
yarn dev
Your node application is now running at http://localhost:4000
If you look in the package.json
file you will see all of the external dependencies, or modules, that we will need for today's workshop.
├── __solution
├── __workshop
| ├── exercisesP1.js
| └── ...
├── data (data files used to complete exercises)
| ├── dataFiles.js
| └── dataFiles2.js
├── node_modules (where all external dependencies are saved)
| ├── ...
| └── ...
├── public (folder that serves static files)
| ├── styles.css
| └── static.html
├── views (location of all the ejs template files)
│ ├── pages
│ │ ├── homepage.ejs
│ │ └── exercises
| | ├── q1.ejs
| | └── ...
│ └── partials
│ ├── head.ejs
│ ├── header.ejs
│ └── ...
├── .gitignore
├── package.json (where we keep a record app setup)
├── README.md (this file)
├── server.js
└── yarn.lock ("locks" the dependency versions)
<%
'Scriptlet' tag, for control-flow, no output<%=
Outputs the value into the template (HTML escaped)<%-
Outputs the unescaped value into the template<%#
Comment tag, no execution, no output%>
Plain ending tag
- When you run
yarn install
, yarn reads thepackage.json
and downloads the dependencies in thenode_modules
folder. It will also generate ayarn.lock
file if it doesn't already exist; if it does exist, it will defer to the version numbers in that file, rather than taking the most recent version available remotely. This is to ensure compatibility and prevent breaking changes in dependencies from, well, breaking our app. ejs
files are basically superchargedhtml
files. We can pass in JavaScript values. It allows us to do TONS of cool stuff. 😀- Use the
styles.css
to add some zing to your exercises.
This workshop is a little "meta". The workshop contains a UI for the tutorial. As go through the questions, you will actually work on the UI of the tutorial and improve the app. You will find all of the questions can be found at the /question<#>
endpoints in the browser.
e.g. Question 1 is located at https://localhost:8000/question1
. Type that in the browser. The question should appear!
You will need to use two files to answer most of the questions.
You will write all data-manipulating JS in the exercisesP1.js
file for questions 1 to 5, and when applicable, the HTML output in the ..views/pages/question<#>.ejs
file.
The solution folder contains solutions but none that can be run. They are technically outside of the app. You can locate the file you are working on and compare with your solution.
75% Minimum | 100% Complete | Stretch |
---|---|---|
Question9 (incl.) |
Question10 (incl.) |
see below |
- Are there any other optimizations that you could make?
- Create a new endpoint.
/bacon
where the visitor can see an inspiring message from you. - Take a look at the EJS Docs
- If you feel so inclined, add some CSS to create a better looking tutorial. Who knows, the next cohort might use your design. 😉