- Make sure you have Yarn set up (installation instructions).
- Run
yarn install
to install dependencies. - Run
yarn start
to start the server. - Open the website by pointing your browser to
http://localhost:3000/
When you run yarn start
, you are spinning up a web server which will serve
your web page. The source for this server is in app.ts
: you shouldn't really
need to worry about this file.
The files that it hosts are in the views/
folder. The files are HTML template
files using a language called
Handlebars. Everything is
regular HTML as you know and love, except for special Handlebars tags enclosed
in {{ }}, which tell the server where to put in the article information. Check
out the documentation if
you have questions, but I've set you up with a basic Handlebars template that
renders an article list as an example to work off of.
You can specify styles in the styles/style.scss
file. These are written in a
language called SCSS, which is an extension of CSS (you can write normal CSS in
there and it will work fine; for more info, check the
documentation). These files will
automatically be compiled to regular CSS files (in the public/
folder) and
served with your webpage as long as yarn start
is running. Make sure to only
edit the files in styles/
and not public/
, as the files in public/
are
automatically generated from the SCSS source.
Should you wish to add additional pages (perhaps one page per section),
you can create a new view file in views/
and then update app.ts
by following
the example. I've included a page at http://localhost:3000/other
as an example
of how this might look.
I set you up with a template page that renders some stories on a page (based off of the COVID-19 profile series webpage), but it doesn't look great and isn't very functional. Your goal is to make a website that can show off a small, fixed number of stories divided into different sections. We don't know exactly which sections and stories are going to be in the paper yet, so don't worry about getting all of the details exactly right! As long as there is a clear structure for how the page is organized and can adapt to different sections, we can customize it once we know the details.