►
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
A
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
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
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
A
A
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
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
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
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
A
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
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
A
A
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
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
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.