►
Description
In this workshop, we build a Mario Wkik app using express and MVC architecture. the workshop can help provide you with an idea of how you may leverage hyper in your MVC apps.
You can see the completed Part 1 Repo here:
https://github.com/hyper63/demo-mario-wiki-part-1
A
So
for
this
workshop,
we're
going
to
build
a
simple
wiki
like
application
or
crud
application
called
mario
wiki,
and
the
purpose
of
this
application
is
to
allow
users
to
document
the
mario
universe,
games
and
characters
and,
throughout
the
course
of
this
workshop
as
we
build.
This
you'll
see
kind
of
a
natural
way
on
how
you
can
leverage
hyper
in
your
applications.
A
A
A
So
the
first
thing
we
want
to
do
is
we
want
to
initialize
a
node.js
project
and
I'm
going
to
use
yarn
yarn
is
similar
to
npm,
but
it
has
a
little
bit
different
way
of
resolving
dependencies
or
it's
quite
nice.
So
I'm
going
to
do
yarn
knit
and
dash
y.
A
So
I
don't
get
prompt,
did
any
information
and
then
I'm
going
to
add
kind
of
the
bits
that
we'll
need
in
this
project
to
to
build
our
mvc,
mario
wiki,
so
we're
going
to
go
yarn,
add
express,
zod
and
and
zod
will
allow
us
to
define
schemas
node
fetch,
because
we're
going
to
need
node
fetch
to
connect
to
hyper
connect
and
ejs.
A
A
Either
way
you
want
to
call
it
will
basically
spin
up
a
node
instance
and
then
every
time
we
change
a
file,
it
will
restart
so
we're
going
to
add
those
as
dev
dependencies,
pretty
cool
and
now
we're
going
to
go
ahead
and
set
up
three
folders,
because
this
is
an
nvc
we're
going
to
make
directory
and
we're
going
to
create
a
models
directory,
a
views
directory
and
a
controllers
directory
just
like
that.
A
So
we've
got
our
models,
views
and
controllers
and
let's
go
ahead
and
work
with
package.json
to
get
some
stuff
set
up,
we're
going
to
use
esm
modules.
So
we
need
to
make
the
type
of
project
a
module
type
project,
and
that
just
means
we'll
need
to
use
import
everywhere
and
then
we're
going
to
create
a
scripts
section.
A
And
we're
going
to
just
have
a
dev
script
which
we'll
call
node
mon
and
we're
going
to
require
dot,
emb,
slash,
config
server.js,
we'll
do
that
for
starters
now
and
then.
Finally,
what
we're
going
to
do
is
create
a
server.js
file.
A
A
A
A
So
this
is,
this:
is
old
school
we'll
create
a
view,
and
we
will
call
it
index.ejs
so
index.ejs
like
that
and
then
we'll
basically
add
a
html
file
and
we're
gonna
use
the
include
syntax
to
inject
some
stuff
that
we
will.
You
know
kind
of
inject
in
all
of
our
views
like,
for
example,
the
head
section,
and
that
way
it's
just
available
in
one
spot
and
we
don't
have
to
have
a
lot
of
duplicate
stuff
and
we
have
body,
and
then
we
have
a
header
and
with
that
we're
gonna
inject
a
nav
view.
A
A
Like
other
view
engines
or
reacts
jsx
or
svelte
or
whatever
you
have
these
delimiters
and
in
this
case
with
egs,
the
delimiter
is
less
than
percent
and
then
percent
greater
than
surrounds
it,
and
the
reason
that
we
have
those
delimiters
is
to
let
the
template
engine
know
where
to
execute
code.
Oops,
okay.
A
And
new
file,
nav
dot,
ejs.
A
And
with
head,
it's
going
to
be
our
html
head
section
with
this
title:
that's
why,
in
our
controller,
we
passed
a
title
in
so
that
this
head
section
gets
that
title
oops
paste
it
in
the
wrong
file.
Okay
and
then
our
navigation
is
just
our
navigation
list.
So
with
that
we
have
a
nav
element
and
some
pass
home
games,
characters
and
about
pretty
cool.
A
A
Save
cool
close
pose
close,
so
if
we
got
nav,
we've
got
our
links,
we've
got
index,
we've
got
head,
so
we
have
all
of
our
templates
here
and
on
our
server
we're
calling
home,
which
is
in
our
controllers,
and
this
controller.
We
don't
need
data,
so
we're
not
getting
any
data
and
we're
just
calling
res.render
response.render
the
index.js
template
we're
passing
a
title.
A
A
A
And
let's
go
ahead
and
set
up
a
dot,
get
ignore
file
and
that
get
ignore
file,
we'll
add
node
modules
and
emv,
because
we're
going
to
want
to
set
up
a
dot
emv.
Okay!
A
A
Cool
so
models
before
we
start
to
create.
So
one
of
the
first
things
we
want
to
do
is
click
games
and
list
games.
Of
course,
games
does
not
exist,
so,
let's
kind
of
work
that
backwards.
Okay.
A
A
A
A
A
A
A
We'll
call
this
index.js
because
it's
going
to
be
a
list
of
games,
we
could
create
one
file
and
have
them
all
in
there,
but
I'm
just
going
to
create
separate
files
just
so
that
they're
small
and
it's
kind
of
easy
to
see
what
they're
doing
so
here
we'll
do.
Export
default
function,
request
response
and
then
what
we're
going
to
want
to
do
is
just
return,
rest.render
and
we'll
say
games
index,
and
we
need
to
give
it
a
title.
A
A
We
need
to
get
data
and
we
need
a
data
source
to
do
that.
So
this
data
source
needs
some
sort
of
schema
to
define
what
a
game
is,
and
it
also
needs
a
back-end
service
to
store
that
let's
go
ahead
and
create
a
backend
service,
so
we'll
go
to
hyper.io.
A
A
A
And
I
just
do
the
star
as
z,
but
you
could
import
like
object,
string,
etc
whatever.
But
what
we
want
to
do
is
set
up
our
schema
or
our
model,
and
this
is
how
we'll
validate
data
coming
in
from
an
untrusted
area
like
the
internet.
So
we
can
say
it
wants
to
be
a
shape
of
an
object
and
one
of
the
properties
is
an
id.
A
So
we'll
do
dot
string
it's
the
type
and
we
want
to
put
a
reg
x
on
it.
We
want
to
say
that
this
id
must
start
with
game
and
in
order
to
be
valid
right
and
then
we
want
to
type
a
document
type
and
it's
a
literal.
It
means
that
it
can
only
be
this
value,
but
it
needs
to
be
set
or
I
can
set
it
as
a
default
game
like
that.
A
A
So
we'll
make
it
a
string
and
we'll
set
the
minimum
of
four
and
the
max
of
four.
So
we
don't
get
like
any
kind
of
two
digits
like
80
for
1980,
which
won't
make
any
sense
and
then
we'll
create
a
function
called
validate
and
it's
going
to
take
our
data
and
it's
going
to
just
return
the
result
of
schema
dot,
safe,
parse
data,
okay.
A
A
A
A
Another
awaited
call
of
list
make
sure
that
got
in
there
now,
if
I
go
ahead
and
try
to
run
that
node
scripts
seed,
I'm
going
to
get
an
error
and
the
reason
that
I'm
going
to
get
an
error
is
because
node
fetch
is
not
set
up
and
hyperconnect
is
expecting
a
fetch,
a
fetch
function
and
a
request
object
of
fetch
to
be
available
in
the
global
workspace.
A
The
the
whole
node
esm
require
js
mess
and
it
is
just
a
mess.
I
have
to
do
that,
so
we're
gonna
basically
bring
in
this
function.
A
It's
a
sync
function:
that's
going
to
import
dynamically
node
fetch
and
then
it's
going
to
make
that
global,
and
we
can
call
the
register
function
like
that,
and
this
will
allow
us
to
connect
to
hyper.
But
just
like
we
did
the
dot
emv.
We
need
to
go
to
our
package
json
and
add
another
r
and
call
scripts
dot
register
cjs.
A
You
know
what
I
probably
need
to
do
a
dot
in
front
of
it.
That's
probably
what
it
is.
A
Cool
so
that
allowed
us
to
add
some
docs
seed,
our
data
source
and
now
we've
got
a
way
to
restart
our
app.
So,
let's
restart
it,
let's
see,
okay,
so
here's
another
kind
of
pain
point
is
that
it
changes
the
extension,
the
cjs
json
and
we
want
the
the
restart
extension
to
be
js
and
json.
So
we
have
to
change
that.
A
In
our
package
json,
we
can
say
extension
coolstar.js
that
comma
star.json.
A
A
You
know
if
it's
defaulted
in
the
browser
would
be
a
good
idea,
possibly
to
default
it
in
node.
So
that's
what
we're
we're
hoping
for
anyway.
Okay,
so
now,
we've
got
that
set
up.
Let's
go
back
to
our
models
and
our
game
model
and
let's
implement
our
list
function.
So
to
do
that.
A
A
A
Okay,
so
that's
our
view,
so
it's
going
to
iterate
through
each
one
of
these
game
objects
and
for
each
one
of
those
game
objects
we're
going
to
print
out
on
the
side
which
will
be
a
card
in
our
html
template.
So
let's
give
it
a
shot.
Let's
see
how
we're
doing
we'll
go
to
home
home
loads.
That's
great!
A
A
A
game
and
let's
go
ahead
and
do
that
and
we'll
kind
of
do
it
outside
in
so
the
first
thing
we'll
do
is
so
one
of
the
things
with
this
old
school
nbc
approach
is
we're
going
to
create
a
form
and
then
we're
going
to
render
that
form
with
a
cross
reference
cross
site
reference
protection
so
that
you
know
when
we
do
a
post.
A
That
is
only
coming
from
our
form
that
we
rendered-
and
this
will
be
a
protection
mechanism
that
that
you
need
to
do
when
you
generate
forms
via
url,
encoded,
form,
post
but
and
then
in
next
future
workshops
as
we
move
to
react
and
other
things,
you'll
you'll
see
other
ways
to
do
that
as
well.
But
what
we
need
to
do
is
create
a
form
and
we'll
you
know,
implement
cross
site,
scripting
protection
and,
let's
see
if
we
installed
that,
I
don't
think
we
installed
it.
So
we
need
to
install
it
check.
A
A
And
then
we're
going
to
implement
our
routes
and
we'll
create
a
new
controller
called
import
game
form
from
controllers
games,
we'll,
say,
forum.js
and
then
we'll
also
import
star
as
game
actions
from
controllers
dot
games.
Slash
actions.js,
we'll
comment
that
out
for
now,
because
we
won't
necessarily
need
it
at
the
beginning.
So
the
first
thing
we
want
to
do
is
handle
app.get,
slash
game,
slash
new,
and
we
want
to
run
it
through
our
middleware.
A
A
A
A
A
A
A
So
that
should
cover
our
template,
our
view,
and
that
gives
us
our
view
and
our
controller
and
we've
got
it
referenced
on
the
server.
Only
thing
I
want
to
make
sure
is
in
our
index
ejs
for
games.
Do
we
have
a
button
to
add?
No,
we
don't
so.
We
want
to
create
a
new
section
and
then
a
button
to
add
game,
slash
new
I'll,
say,
add
game
and.
A
A
We
just
gotta
tell
it
to
use
the
cookie
parser
so.
A
A
A
Library,
which
will
generate
a
random
number,
our
random
string,
so
that
we
can
use
to
name
our
model
and
actually
yeah.
I
think
that's
good.
A
And
this
create
function
as
a
controller
and
we're
going
to
need
to
get
some
some
we're
going
to
need
to
take
our
body
which
is
coming
in
via
the
request
of
the
form
and
then
extract
out
some
important
bits.
So
we
want
name
description
published
we'll
extract
that
out
of
the
body
and
for
right
now
we're
just
going
to
console
log.
It.
A
And
we're
not
going
to
call
our
controller
yet
we're
just
going
to
work
on
rendering
our
view,
so
we
need
to
create
this
view
on
success.
Dot,
ejs.
A
A
A
A
Everything
is
good,
so
we
start
with
home:
go
to
games,
go
to
add
games,
we'll
say
mario
kart
racing
game
and
it
was
published
1999
and
I'm
just
making
that
up.
I
don't
know
when
it
was
published.
Okay,
success,
cool
return
to
games,
it's
not
there
because
we
haven't
added
our
model
code
and
our
hyper
code.
So
let's
do
that
real,
quick
and
we'll
start
in
our
controller.
A
And
let's
go
there
and
then
basically,
we've
got
our
body,
we
console
logged
it
and
see.
We
don't
want
that.
We
just
want
the
name
description
published,
so
we
pulled
that
out
and
now
we're
going
to
go
to
call
await
and
games
dot,
add
from
our
model
and
then
we're
gonna
pass
an
id
of
game
dash
plus
c.
A
U
I
d
so
that'll
generate
a
unique
value
for
our
game
and
then
we're
gonna
set
the
type
to
game,
even
though
that's
would
be
defaulted
when
we
go
through
validation
and
we'll
set
our
name
to
name
and
description,
to
description
and
published
to
published.
A
A
A
A
A
Data
error,
we'll
call
validate
game
okay,
so
this
safe
parse
returns
an
object
with
success,
which
is
a
boolean
data
and
error.
Both
data
and
error
are
optional.
If
success
is
true,
then
data
will
be
set.
So
now
I
can
just
return
await
hyper
dot,
data
dot,
add
game,
actually
data,
because
we
want
to
add
the
data
from
here
and
then
else
return,
ok,
false
and
the
error,
because
that
will
be
set.
A
A
A
One
of
this
workshop,
where
we
have
gone
from
from
scratch,
creating
an
express
app
using
egs
as
our
ejs
as
our
view
engine
and
worked
through
connecting
hyper
in
our
model
layer
and
created
two
model
functions
and
add
in
a
list
and
in
part
two
we'll
do
an
update,
remove
and
do
you
know
a
full
crud
form
and
then
in
other
parts
we
may
do
characters
and
and
those
things
to
just
kind
of
show
it
again
and
then
an
association
between
games
and
characters
because,
like
donkey
kong,
what
characters
wearing
donkey
kong,
mario
brothers,
what
characters
were
in
there
and
we'll
associate
those
two
model
types
so
that
we
can
get
a
list
of
appearances
from
characters
in
a
game
and
a
list
of
games
when
you
view
a
character.