►
From YouTube: Using Public CDN in client side code
Description
Season 1 Episode 4 walks through implementing Public CDN in client-side code using the new page properties provided so that the URL is not hard-coded but it can still make use of the Public CDN.
New properties that can be used: “window._spPageContextInfo.publicCdnBaseUrl” in classic pages, display templates, etc. and “this.context.pageContext.legacyPageContext.publicCdnBaseUrl” in SPFX web parts for Classic and Modern.
A
Good
day
and
welcome
to
season
1
episode,
4
in
the
SharePoint
performance
mini
series
today,
we'll
be
talking
about
using
public
CDN
in
client-side
code.
My
name
is
Scott
George
and
I'm
on
the
ship
on
and
onedrive
engineering
team.
What
you'll
see
is
that
the
format
of
the
video
has
changed
a
little
bit.
You'll
see
that
just
it's
just
a
change
in
template.
It
is
still
a
continuation
from
season.
1
episode,
1
2,
&
3.
If
you
haven't
watched
those
and
don't
know
what
CDs
are,
please
go
ahead
and
go
through
them.
They're.
Very
short.
A
All
of
these
are
10
minutes
or
10
11
minute
clips
that
you
can
learn
about
the
various
elements
from
that's
what
we're
going
to
talk
about
today.
A
brief
and
I'm
gonna
touch
briefly.
I.
Don't
want
to
drag
it
on
because
we
do
have
other
videos
on
this.
Well
touch
briefly
on
content,
delivery
networks,
we'll
talk
about
the
public,
CDN
page
context,
property,
some
implementation,
samples
and
then
do
a
quick
summary.
A
A
Now
it
has
a
tenant
level
control
with
four
levels,
which
are
what
we
call
origins
and
I'm
not
gonna.
Go
through
each
of
these
points,
but
a
couple
of
key
call-outs
is
it
uses
the
HTTP
2
protocol,
which
is
important
because
SharePoint
by
default,
uses
1.1,
which
means
you
can
only
have
6
rates
from
the
browser
going
in
getting
the
information
to
load
on
the
page
at
a
time,
whereas
an
HTTP
2
it
doesn't
have
that
limitation.
A
So
you'll
notice
that
when
you're
using
c
ends
your
images
that
you
get
your
javascript,
your
CSS
files
you
get
from
that,
do
not
affect
the
timeline
of
the
page
and
that's
the
important
part.
You
want
the
overall
timeline
of
the
page
reduced
and
the
weight
of
the
page
reduced,
so
the
users
have
a
better
experience
and
that
uncertainty.
So
it's
an
important
point.
It's
not
just
a
cache
location;
it
is
also
a
case
of
using
the
different
protocol.
Key
thing
that
we're
talking
about
today
is
public.
A
Cdn
is
anonymous
access
to
it
now,
there's
an
old
indication
on
it
at
all
and
it,
except
that
it
uses
the
ship
on,
refers
if
you're
coming
from
a
ship
on
location
you
can
get
to
it.
Bear
in
mind,
though,
to
get
to
that
particular
URL.
You
would
have
to
know
exactly
what
it
is,
so
someone
would
have
to
physically
go
and
share
that
with
someone
in
order
for
them
to
develop
the
Exorcist
from
my
ship
on
location.
A
Private
cannot
be
hard-coded
in
the
way
that
I'm
going
to
show
you
now,
because
it
recycles
every
60
minutes
means
the
URL
changes
there
in
60
minutes,
and
it
does
make
use
of
a
first
user
access
and
authentication
cookie
and
all
that
I'm
not
going
to
go
into
that
now.
But
so,
let's,
let's
actually
look
at
what
we're
here.
A
For
today
we
have
a
public
CDN
page
context,
property
that
property
is
available
to
you,
the
first
one
I'm
going
to
talk
about,
which
is
the
classic,
particularly
using
display
templates
and
then
I'll
go
into
the
ship
on
from
a
webparts
which
is
in
modern
and
classic.
Now.
What
you'll
notice
is
this
prefix?
That's
highlighted
at
Tapia
is
public
CD
and
dark
shape
on
online.com.
This
rest
of
it
is
what
we
will
build
up.
Natinal
automatically
this
particular
one
people
out
know.
We
know
people
have
thrown
in
hard
coded
this
value.
A
We
don't
want
you
to
do
that,
so
we're
giving
you
this
property
now
and
I'm,
giving
you
a
couple
of
samples
on
how
to
use
them.
Let's
focus
on
the
first
one.
The
classic
windows
underscore
SP
page
context,
info
public
CDN
base,
URL
and
jump
to
that,
and
if
you
have
a
look
at
that,
I
know
it's
code
on
the
screen,
not
super
easy
to
read,
but
you'll
notice
that
we
are
not
just
using
the
value
here.
A
So,
in
order
for
you
to
not
have
to
go
change
all
that
code,
if
you
simply
do
a
check
wish
to
see
that
the
value
of
the
public
CDN
URL
is
is
a
rate,
it
really
exists
in
your
URL
you.
It
will
simply
skip
up
your
code
and
that's
a
recommended
way
to
do
that.
Don't
go,
don't
go
change
it.
If
you
don't
need
to
and
then
we
actually
go
set
the
value,
so
only
if
it
doesn't
have
it
set
the
value.
A
So
let
me
jump
into
the
display
template
very
quickly
and
show
you
what
that
looks
like
this
is
a
standard
display
template
that
I've
simply
taken
I
made
a
copy
of
and
made
my
own
version
or
my
own
one
don't
go
and
edit
either
the
default
ones
and
I'm
also
not
telling
you
to
go
and
edit
your
display
tablets.
What
I'm
telling
you
is,
if
you
already
have
them
and
you
wanted
a
new
CDNs,
then
you
can
go.
A
Do
it
this
way,
I've
taken
the
picture
on
left
with
three
lines
on
right
default:
one
and
now
I've,
then
added
hey
from
CD
internet,
so
that
I
can
differentiate,
which
are
mine
and
then
I
simply
uploaded
back
into
the
master
page
gallery,
which
will
then
automatically
create
the
JavaScript
files.
For
me,
I.
Don't
need
to
do
that.
A
I'm,
gonna,
scroll
down,
excuse
me
and
what
you'll
notice
over
here
is
that
this
is
the
default
code
that
comes
with
a
display
template
in
this
particular
one
other
displayed
to
him.
It's
a
different
values
I'm
using
this,
in
example,
you'll
notice.
The
first
chair
comes
first
checking
that
I
get
a
value
I'm
then
moving
on
and
checking
the
value
of
it
as
well,
and
I'm
then
going
to
actually
see
well.
A
Does
the
public
CDN
base
URL
already
existing
in
the
URL
if
it
does
skip
over
this
code
and
do
nothing
if
it
doesn't,
let's
go
and
change
that
URL
and
we'll
do
that
by
adding
the
prefix
plus
a
forward,
slash
plus
a
location
host
which
is
attention
your
tenant
name,
plus
the
actual
relative
path
of
the
URL?
Now
we
notice
is
no
hard
coding
in
here.
Simply
we
are
getting
the
values
that
work
and
building
up
this
the
URL
automatically.
Now,
let's
go
look
at
what
that
looks
like
on
the
page
itself.
A
So
if
I
look
on
the
page
I'm
in
a
classic
page
here,
simply
publishing
page
and
you'll
notice
that
this
is
actually
a
content
by
search
web
part
and
yes,
the
middle
image.
It's
not
showing
anything
because
there
isn't
an
image
for
it.
I
just
wanted
to
show
you
that
there
is
no
image.
That's
what
you'll
see
now,
if
you
look
at
the
one
in
two
here,
there
are
images
for
this
and
I
wanted
to
show
you
what
that
actually
looks
like
in
the
background
with
having
rewritten
it.
So
let
me
drag
on
this
element.
A
Click.
Let
me
pick
that
and
let
me
drag
on
my
f12
developer
tools
and
I
want
to
show
you
what
that
looks
like
and
if
you
have
a
look
here,
you'll
see
that
the
source
of
that
image
is
actually
public,
CD,
n
dot,
chiffon
online.com,
my
tenant
name
and
then
obviously
the
location
of
the
image
itself,
the
relative
path
for
that,
but
also
notes
as
I
haven't,
edited
or
change
anything
else,
no
other
part
of
it
and
English
rain.
That's
on
the
page,
and
that's
all
it's
the
important
part
right.
A
A
If
you
want
to
know
how
to
build
them
from
scratch,
go
to
shape
on
PNP
and
you'll
be
able
to
see
that
there's
lots
of
samples,
there's
lots
of
videos
on
the
SP,
P
and
P
videos
link
and
that
detail
is
available
day
into
the
slide
right.
So
the
sample
here,
pretty
simple,
the
real
developers
watching
this
you'll
see
I've
taken
a
very
simple
sample
for
you.
A
Http
colon
forward
slash
forward,
slash
public
dock
sharepoint,
online,
dot-com
or
public,
see
the
end
of
shipping
online.com
and
then
what
you'll
do
is
you
will
you'll
notice
again
there's
no
hard
coding
I
go
and
get
the
host,
which
is
effectively
my
contested
shape
on
a
common,
my
relative
URL,
which
is
ford,
slash
sites
and
so
on,
and
that
will
then
return
and
actually
provide
directly
to
my
public
scene.
Yet
so,
let's
see
that
in
an
individual
studio
code
quickly
what
it
looks
like
and
if
I
bring
it
up.
A
This
is
simply
a
Samba
web
part
of
it
in
any
shape
on
frame
a
web
part
and
you'll
notice
that
I
have
a
property
on
my
web
part
where
I've
set
the
relative
path
for
it.
It's
a
smart,
simple
way
to
show
you
if
you
obviously
using
a
search
web
part
or
you
were
you're
getting
the
the
actual
file
back
and
other
means.
You
would
need
to
obviously
then
use
that
value.
Now.
A
Here's
the
constant
that
I've
set
up
I'm
simply
going
in
you
getting
the
this
context,
page
context,
legacy
page
context,
public
seating
base,
URL
and
I'm.
Then,
using
that
to
check
that
it
has
a
value
again,
an
example-
and
this
is
just
an
example-
if
you
had
a
variable
that
had
the
URL
in
this
would
be
your
variable
name,
and
you
could
do
an
inexact
check
against
it
to
see.
Does
it
have?
Was
the
URL
already
rewritten
if
it
was
already
written,
obviously
leave
it
alone,
and
you
could
then
put
that
check
over
here.
A
In
my
particular
case,
I
know
it
wasn't
rewritten
so
I'm
not
doing
that
check
just
for
simplicity
for
the
sample
and
what
you'll
notice
there
is
I'm
getting
the
Windows
location
host
here.
I
notice
it
there.
There
is
my
public
CDN
base,
URL
and
you'll,
see
it's
public,
CDN
or
Chipman.
Online.Com
is
what
I'm
putting
in
this
one
here.
A
This
is
Mike
on
toasted
or
chip
on
your
comments
on
poll
and
therefore
that's
the
host
and
then
there's
my
relative
path
as
an
example
in
this
case
and
I've
bought
it
all
up
in
our
return
name,
each
RL
there's
nothing
as
hard-coded,
so
obviously
it
has
a
longer
longer
lifespan
and
should
we
change
and
when
we
change
some
of
the
URLs
all
right.
Let's
see
that
input
data
in
action.
If
I
go
back
to
my
page
and
yes,
I
know
it's
an
any
page,
but
I
just
wanted
to
show
you
example.
A
So
this
particular
case
here
is
the
public
CDN
usage
sample
that
you
saw
in
code.
This
is
the
URL
that
I
passed
to
it
and
you'll
notice
that
I
get
the
image
back
and
again,
let's
go
check
it.
If
I
now
pull
up
my
dragged
it
out
for
a
moment.
Let
me
go
select
this
image
and
you'll
notice
about
picket
and
bring
it
back.
You'll
see
that
it
is
reading
from
the
public
sea
and
ship
on
online
comm.
A
There's
the
full
URL,
as
you
can
see
it
right,
pretty
simple
implementation,
but
gives
you
the
basis
for
you
to
be
able
to
do
your
own
right.
Let
me
go
and
minimize
this
all
out
and
get
back
to
the
presentation,
and
what
you'll
notice
now
is
that,
as
with
all
of
these
webcasts
they're
about
10
or
11
minutes
long
helpful
links
at
the
end
go
and
check
out
these
links,
the
easiest
ones
to
get
to
always
here
the
tunas
Bo
here
the
PPE
and
then
I'll.