►
Description
In this demo, Ben will demonstrate how to get PWA up and running with Magento Cloud.
A
Okay,
hello,
everyone
again,
so
today
we
have
another
cloud
demo
session.
Today
we
have
been
Bachelet
with
us,
who
is
our
software
engineer
and
equality.
So
for
some
background
and
initially
I
was
integrating
pwe
or
magenta
cloud,
and
essentially
he
was
one
of
the
main
contributors
to
do
the
integration
for
cloud.
So
today
he
wants
to
share
with
you
a
bit
more
information
about
how
this
works,
and
you
know
how
to
do
it
right
so,
but
to
start
when
you
already.
B
B
So,
first,
some
just
general
background
information.
Pwa
studio
is
our
Magento's
tools
for
developing
progressive
web
applications
or
Magento.
It's
written
in
react.
So
it's
a
question
of
components.
You
can
kind
of
mix
and
match,
but
over
you
need,
and
then
venya
is
our
reference.
Implementation
of
that
front
end.
So
vignette
is
two
PWA
studio
as
Luna
is
two
luma
is
two
Magento
right.
So
the
same
kind
of
idea.
B
Upward
an
upwards
server
acts
as
a
router
and
a
proxy
between
your
venue,
front-end
and
your
Magento
back-end,
so
upward
itself
is
actually
just
a
specification.
It
lays
out
the
schema
for
a
yellow,
based
configuration
file
and
then
the
upwards
server
reads
that
yellow
file
and
then
behind
certain
behaviors,
whether
that's
serving
static
files
or
doing
templating
or
graphical
queries,
just
kind
of
a
combination
of
different
services.
B
The
upward
server
offers
and
our
original
implementation
of
awkward
is
written
in
JavaScript
as
an
ojs
service.
But
when
we
wanted
to
move
on
to
Magento
cloud,
that
became
an
issue
because
currently
there
is
no
supported
way
of
deploying
a
nodejs
service
on
Magento
cloud.
So
we
went
back
to
that
spec
and
row
up
a
second
implementation
in
PHP,
and
that
is
upward.
B
Php
upper
PHP
is
not
dependent
on
the
gentle
directly,
so
it
uses
end
or
alumnus
as
some
of
its
request
modeling,
but
it
does
not
depend
on
image
if
it
directly,
so
you
can
actually
deploy
upper
PHP
on
any
PHP
server
anywhere
without
Magento.
If
you
really
wanted
to,
there
is
also
the
upward
connector,
and
that
is
a
Magento
to
module.
So
the
upper
connector
graphs
upper
PHP
and
injects
it
into
Magento
zone,
front
controller
stack
and
lets
up.
B
Let's
talk
about
how
to
you
deploy
a
venya,
storefront
and
upload
it
to
cloud
I'm
going
to
kind
of
operate
on
the
assumption
that
you've
got
a
basic
vanilla
and
the
gentle
cloud
project
already
set
up
and
close
down
locally
and
that
you've
got
a
venía
storefront
project
somewhere
else
on
your
system.
So
we
need
to
make
a
handle
changes
to
that
Magento
cloud
project.
First
and
foremost,
we
need
to
require
the
Magento
up
word
connector,
and
this
is
what
will
inject
up
right
into
our
request.
B
As
I
said,
you
do
not
need
to
require
awkward
PHP
directly
because
it's
a
dependency
of
the
upper
connector,
so
you
just
have
that
one
composer
requirement.
Now
we
need
to
include
our
PWA
assets
along
with
our
project
and
so
we're
going
to
store
them
in
a
PWO
directory,
which
means
we
need
to
update
our
git
ignore
in
order
to
include
that
right.
So
we
need
to
include
both
the
PWA
directory
and
the
templates
directory
and
all
of
its
contents
for
testing
and
developments.
B
B
In
addition,
obviously,
if
they're
in
the
repository
section,
you
also
need
to
add
the
packages
themselves
to
the
dependencies
section
in
your
composed
of
JSON,
because
these
are
for
testing
and
development
and
early
development
process
using
the
master
branch
is
generally
fine.
You
wouldn't
really
wanna
do
this
in
your
production
branch,
but
that's
okay.
B
Some
of
these
can
change
slightly
depending
which
environment
you're
on,
but
some
of
them
are
constant,
so
I've
put
them
all
in
my
begin
at
the
animal
just
for
ease
of
demonstration,
but
depending
on
your
environment
and
your
use
case,
you
may
want
to
actually
configure
some
of
these
in
the
project
UI
rather
than
the
Afghan.
So,
first
and
foremost,
the
upward
connector
needs
to
know
where
your
upward
gamma
file
is.
It
needs
to
tell
uppered
PHP
where
to
find
it.
The
upper
connector
uses
Magento
standard
configuration
store,
so
you
can
use
this
syntax
here.
B
Config
default
web
upward
path
in
order
to
configure
that
from
the
environment
variables
without
having
to
mess
with
the
and
then
UI,
or
do
anything
with
the
command
line.
So,
on
your
starter
environments,
this
is
going
to
be
constant
across
all
your
environments.
There's
me
under
starter
projects,
though,
at
PWI
per
channel
on
a
pro
based
project.
This
is
going
to
vary
on
your
production
and
your
staging
branches,
so
this
is
one
that
you
may
want
to
configure
through
the
the
UI.
Similarly,
your
Magento
back-end
URL
needs
to
be
configured.
B
Obviously
this
is
gonna
vary
depending
on
which
environment
you're
in
you
can
kind
of
get
away
with
using
one
back-end
for
all
your
integration
environments,
that's
sort
of
okay.
But
again
you
probably
want
to
change
that,
depending
on
which
environment
you're
working
with
and
then
your
Braintree
token.
Obviously
for
your
production
or
your
master
branch,
you
should
have
your
production
value
there
or
your
test
and
all
the
branches
you
can
use
the
sandbox
token
as
I.
B
And
it's
a
little
hard
to
point
down
time
depending
on
how
we
are
set
up,
so
you
can
use
your
Magento
needed
a
channel
to
skip
static
content
deployment,
the
only
kind
of
catch
there
is.
If
you
have
a
non
venía
storefronts
or
your
admin
panel,
those
both
need
to
have
their
own
static
content
generated,
so
I
will
generally
use
SCD,
on-demand.
C
B
Order
to
generate
those
assets
if
I
need
them
when
I
go
to
the
admin
panel.
If
you
want
a
little
bit
more
control
over
this
I
would
encourage
you
to
look
at
the
sed
matrix
variable
and
there
you
might
be
able
to
configure
just
the
specific
front-end
or
back-end
that
you
need
to
generate
your
static
content.
A
B
And
not
have
to
spend
the
entire
time
developing
all
of
the
static
content,
so
we're
going
to
generate
all
of
our
video
assets
on
our
local
system
copy
them
over
into
our
pw
directory
and
then
deploy
that.
So,
let's
take
a
look
at
what
that
looks
like
so
here.
My
editor
I
have
my
venía
project.
This
is
basically
just
a
vanilla,
Benia
project
I
just
generated
this
using
PW
build
pack
create
project.
B
I
haven't
done
any
other
cause
nations
or
changes
here,
but
as
you
go
through
and
develop
your
PW
like
front-end,
you
would
make
your
changes,
modify
them,
and
then
here
in
my
shell
we
would
go
ahead
and
do
yarn
Ron
bill
and
that's
going
to
compile
all
of
my
Brennan
assets,
my
JavaScript
and
compress
everything
down
and
complain
about
my
brain.
She
choking
cuz
im
using
development
value
of
this
plant.
Well,
that's
building.
B
You
can
see
those
environment
variables,
as
I
said,
I'm
just
going
to
put
them
in
here
for
our
demo
purposes.
Some
of
these
you
may
want
to
configure
through
the
product
UI
some
you
can
leave
in
here,
but
here's
where
they
would
all
go
in
there
and
then.
Lastly,
in
as
I
said,
skipping
static
content
deployment
saves
you
some
time
on
your
deployed
and
downs
man
process,
so
my
assets
have
all
been
built
here
in
my
venya
project.
B
So
deploying
them
in
this
case
is
just
a
matter
of
taking
them
from
my
vania
project,
moving
them
into
my
PDA
directory
and
then
switching
back
here
to
the
command
line.
I'll
go
ahead
and
add
the
PWA
directory
make
my
changes
and
then
I
would
push
this
up
to
the
cloud
cloud
would
build
all
my
other
PHP
stuff
and
deployed
I'm,
not
gonna,
make
you
sit
here
and
watch
that
process,
it's
very
tedious.
So
the
end
result,
though,
is
we
get
our
in
front,
and
you
can
see
this
is
running
on
my
Magento
cloud
site.
B
It's
an
integration
branch,
but
even
still,
it
is
very
responsive
because
forgets
about
apps
utilize,
a
lot
of
very
good
caching
and
a
lot
of
offline
storage.
So
these
all
respond
very,
very
quickly
overall,
now
drought,
this
process,
some
of
y'all,
may
have
noticed
kind
of
a
drawback,
and
that
is
that
there
is
a
very
manual
step
involved
here
right
as
I'm
making
changes
to
my
right.
B
Danya
freedom,
I
have
to
manually,
compile
them
manually,
take
them
from
one
project
copy
them
into
another
and
then
deploy
that
project
and
manual
steps
are
always
kind
of
at
the
depth
of
any
good
throughput
on
software
development.
So
the
question
is:
how
can
we
build
all
this
on
the
cloud
and
the
good
news
is
we?
Can
the
bad
news
is
the
way
that
I
solve
this?
B
For
now
is
using
a
absolutely
everybody's
favorite
technology
get
sub
modules
you
might
be
able
to
using
a
NPM
ricotta
private
NPM
repository
push
all
of
the
Urbania
assets
up
to
there
and
add
them
into
your
package
JSON,
but
that's
kind
of
outside
the
scope
of
what
I
was
gonna
cover
today.
So
I
have
my
venía
project
stored
in
my
personal
github
and
then
I'm,
using
a
sub
module
on
my
widget
of
cloud
project
to
include
that
sub
module
with
everything
else
and
that
gets
pulled
down
with
everything.
B
Let's
talk
about
kind
of
the
changes
you
need
to
make
in
order
to
kind
of
follow
this
process
on
your
Magento
cloud
project.
First,
we
need
some
NPM
dependencies
to
be
installed
globally.
So
you
can
add
this
to
your
Magento,
a
PMO.
We
need
to
include
Rim
ref
web
pack
and
yarn
so
that
they
get
installed
along
with
all
of
our
with
PHP
dependencies.
B
We
need
to
make
one
slight
change
to
our
environment
variables
right
because
we
are
compiling
those
assets
on
the
cloud
and
they
get
put
into
the
dist
directory.
We
just
need
to
update
our
path
to
be
under
the
dist
directory.
Let
me
switch
back
to
my
editor
and
I'll
kind
of
walk
you
through
what
that
looks,
like
I'm
changing
branches
here.
B
So
you
can
see
I
tweaked
my
kid
ignore
files
slightly,
because
I'm
using
a
sub
module
I
can
just
include
the
PWI
directory
I.
Don't
need
to
worry
about,
including
all
of
its
other
files
within
it.
It's
a
little
bit
simpler
to
manage
nothing's
changed
my
composer
JSON
same
dependencies
same
depositories,
line
magenta,
happy
ammo.
B
You
can
see
I've
tweaked
the
environment
variable
here
for
media
up
for
DLL
file
at
the
top
I
have
my
no
dependencies
being
installed
and
then,
if
I
scroll
down
here
a
little
bit,
you
can
see
in
the
billhook
here's
where
I'm
installing
end
VM
and
using
NPM
to
install
a
newer
version
of
node
and
then
here's
my
one-liner
in
order
to
assault
all
of
my
PWA
dependencies
and
build
that
project
evening.
Ammo
has
no
changes
and
then
you
can
see
the
get
sub
modules
configuration.
B
So
in
this
setup
my
build
process
would
be
making
my
changes
in
my
pending
a
project
committing
them
to
my
project
and
pushing
them
up
to
my
github
and
then
coming
to
my
Magento
cloud
project.
Updating
that
sub
module.
We
need
to
change
that
sub
module
and
pushing
it
up
to
medium
to
cloud.
It's
a
much
simpler
process,
no
more
manual
steps,
much
easier
to
manage
so
I
wanted
to
leave
y'all
here
at
the
end,
with
a
handful
of
additional
resources
and
some
documentation
on
what
we've
talked
about.
B
I
will,
of
course,
send
out
these
slides
after
this
the
presentations
over
first
and
foremost,
we
have
the
high
level
kind
of
document
product
documentation
on
GWA
studio.
All
of
you
today,
Studios
documentation
can
be
found
at
this
URL.
In
particular,
I
would
highlight
the
upward
configuration
documentation
as
well
as
our
cloud
deploy
tutorial.
This
process
that
I
laid
out
here
is
slightly
tweaked
from
that
tutorial,
but
it
a
lot
of
the
same
concepts
are
included
and
then
all
the
repositories
for
this
software
is,
of
course,
open
source.
B
So
all
of
PWA
studios
code
is
on
that
repository.
It's
a
giant,
mono
repo.
So,
in
addition
to
the
Bene
a
villa
pack,
it
also
includes
the
PM
the
gap
work
specification
as
well
as
the
upper
J's
reference
and
implementation,
and
then
here
the
upward
PHP
implementation
is
under
the
magenta
research
organization.
So
if
you
want
to
look
at
them
again,
upward
PHP
code
I
encourage
you
to
take
a
look
at
repository.
C
Is
manish
from
Chora?
Thank
you
so
much
for
that
this
presentation.
This
is
really
helpful.
A
couple
of
questions
during
that
step,
when
you
mentioned
enabling
skip
content
creation,
you
mentioned
that
if
we
don't
do
it,
if
we
have
default
lumen
theme,
my
question
is:
is
it
possible
to
have
luma
as
well
as
pwf
intent
on
Club?
That's.
B
C
B
C
I
mean
when
two
segments-
let's
say
if
we
have
US
and
UK
site
different
sites,
do
you
have
any
ideas
on
how
we
can
host
that
and
Magento
cloud
I
mean
what
we
are
doing.
I
will
tell
you
is
we
have
created
two
subfolders
in
two
inside
that
PW
a
folder,
and
we
also
had
to
make
some
modifications
to
a
port,
because
that
upward
path
has
to
switch
based
on
store.
So
that's
what
we
are
doing.
I
just
wanted
to
check
with
you.
C
D
B
I,
don't
have
any
first-hand
experience
using
you
storefront
or
any
other
progressive
web
applications.
So
it's
not
something.
I
can
really
speak
to.
Personally,
obviously,
you
know
we're
focused
primarily
on
our
first
party
support,
but
I'm
sure
that
somebody
out
there
has
some
documentation
on
doing
few
storefront
I,
don't
know
about
the
specific
to
doing
it.
On
Klaus
I
can't,
unfortunately,
really
answer
those
questions
so
I'm,
sorry,
I
I,
don't
have
the
experience
to
know
for
certain.
Thank.
D
E
E
You
Ben,
so
we
have
record
in
this
presentation.
Then
we
publish
on
our
YouTube
cloud
committee
engineering
channel.
If
you
have
any
questions,
please
don't
hesitate
to
ask
into
the
cloud
channel
and
yeah
just
a
call.
If
you
have
any
topic
to
present
some
presentations.
Some
experience,
please
feel
free
to
reach
to
me
it
is
Olek
and
oh
yo
and
they
will
give
you
a
free
spot,
so
you
can
present
for
the
broader
cloud
audience.
Thank
you
for
your
attention.
Yeah.