►
Description
In this tutorial, we will deploy the HelloWorld assets to be hosted in the SharePoint Online. Depending on the settings in the tenant level, assets will be then automatically served from the tenant URL or from the Office 365 CDN URL. There are no changes required for developers to address this setting. Even if the Office 365 CDN would be not enabled in the tenant, all assets are automatically served without any external hosting or maintenance requirements.
This hosting is automatically handled for any component type created using SharePoint Framework, so the configuration and steps shown in this tutorial are not web part specific.
⬅️ This tutorial assumes that you have completed following steps - https://www.youtube.com/watch?v=FkFg32NSTM0
You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn?WT.mc_id=m365-15744-cxa
April 2022 version using SharePoint Framework 1.14.
• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen
SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.
Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx
Learn more:
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp
Sharing is caring! You are awesome! 🧡
A
Hello
and
welcome
to
this
getting
started
with
sharepoint
framework
and
tutorial
series,
and
this
is
now
the
part
number
four
where
we
are
finalizing
our
deployment,
we're
doing
the
final
packaging
of
our
web
part,
making
it
sure
that
it's
actually
working
independently.
So
we
don't
have
to
run
the
local
host
anymore,
so
we're
doing
the
fully
polished
deployment.
Well,
we're
not
doing
the
descriptions
and
images
and
all
of
that,
but
it
will
be
an
independent
solution
package.
A
So
we
will
left
the
end
of
part
three
on
the
moment
where
we
realized
that
well,
the
web
part
works
on
a
page
which
is
really
really
cool,
but
now
we
have
this
challenge
that
the
web
part
still
requires
that
the
local
host
is
running
because
we
are
referencing
the
local
host
in
the
web
part
package.
So
this
certainly
isn't
the
right
way
of
doing
things.
We
want
to
want
this
web
part
to
be
completely
packaged
properly
and
independent.
So
let's
actually
do
that.
A
Let's
do
the
right
steps
to
fully
deploy
the
survey
part
and
the
solution
to
the
sharepoint
online
without
the
localhost
dependency.
Now,
how
do
we
do
that
again
in
the
package
solution?
Json
files
super
super
important
settings,
and
these
are
really
for
the
packaging,
and
one
of
the
most
important
settings
here
is
include
client-side
assets.
A
We
are
now
in
the
version
1.14
and
this
one
was
introduced
a
bit
earlier
in
a
1.4
version
quite
a
few
years
ago,
but
before
that
we
had
always
the
requirement
that,
as
we're
deploying
our
solution,
you
also
need
to
reference
the
files
from
azure
or
from
some
other
location.
So
you
had
a
url
endpoint
from
where
the
files
are
being
served,
but
as
part
of
the
1.4
version
we
then
introduced.
This
include
client-side
asset
option
and
what
it
means
is
that
the
package
comes
to
be
completely
independent.
A
So
inside
of
the
sppkt
file
being
the
zip
file,
we
also
have
the
javascript
files
and
the
image
assets
and
all
of
the
other
assets
which
I
want
to
be
so
that
I
can
send
that
sbb
kj
file
to
anybody
else
in
the
world,
and
it
will
work,
there's
no
dependencies
on
anybody
else
hosting
anywhere
anything
else.
In
any
external
system,
any
everything
is
hosted
from
that
particular
tenant
so
which
actually
provides
a
nice
security
boundary.
It
provides
nice
access
points.
A
You
are
all
the
time
in
the
same
network
as
well,
there's
also
automatic
single
sign
on
and
all
of
those
benefits
of
benefits
which
are
available
already
and
have
been
available
for
all
from
a
day.
One
of
sharepoint
framework
now
there's
quite
a
few
other
settings
here,
which
we
do
not
focus
on
this
video.
So
the
key
point
here
is
that
the
include
client's
head
asset
is
by
default.
True-
and
that
means
that
the
packages
are
inside
of
the
of
this,
the
assets
are
inside
of
the
sppkj
file.
A
Now,
let's
actually
do
the
required
steps
now
to
package
this
solution
in
the
right
way,
and
this
is
almost
like
in
the
tutorial
tree,
where
we
prepared
the
bundle
and
the
packaging
but
we're
using
a
bit
of
a
different
different
switch
now.
So
let's
do
a
cop
bundle
bundle
and
that's
the
ship
and
we're
basically
preparing
for
shipping
and
that's
what
the
ship
means
there.
It
doesn't
refer
to
any
boats
or
sea
or
lakes,
or
anything
like
that.
So
we're
ready
to
ship
and
that's
what
we're
doing
here
so
gulp
bundle.
A
A
A
new
version
of
the
sbbkt
file
in
this
sharepoint
solution,
folder,
which
is
ready
to
be
used
as
an
independent
package,
not
referring
anymore
to
the
assets,
hosted
locally,
and
we
can
actually
see
that
if
we
open
up
the
debug
folder
and
if
we
open
up
the,
I
have
started
analyzing
some
of
these
files,
we
can
actually
see
it
inside
of
this
files
whenever
the
rendering
actually
works
there.
We
go
so
as
an
example.
Internal
module-based
urls
in
this
web
part
as
definition
file
or
xml
file,
is
now
referring
to
http
sb
client-side
asset
library.
A
So
this
one
will
be
a
dynamic
reference
of
the
internally
automatically
hosted
assets
from
the
tenants,
so
we're
no
longer
referring
to
the
local
host.
We
are
saying
serve
these
assets
from
the
centralized
location,
which
is
asp,
client-side
asset
library,
which
is
a
hidden
library
actually
in
the
app
catalog
site.
So
technically
it's
a
library
where
we
are
then
extracting
the
package
and
from
where
we
are
serving
all
of
the
javascript
for
us
and
other
assets.
So
that's
simple
enough,
so
let's
actually
do
that.
So
let
me
actually
close
that
one.
A
A
There
we
go
and
then
let
me
go
to
the
sharepoint
solution.
Page.
We
have
a
new
version
available,
matching
the
timings
that
it
has
been
recompiled
in
a
different
time
than
the
previous
version,
which
we
copy
it
to
be
the
zip
file.
I
will
drag
and
drop
this
in
here.
I
will
paste
it
in
and
it's
going
to
ask
me
that
we
are
going
to
replace
yes
before
we
actually
do
that.
Let's,
let's
double
check
things
before
I
do
that,
because
we
have
that
page
open.
A
The
loading
isn't
working
because
again,
localhost
isn't
running,
but
as
we
roll
out
the
new
version
of
the
solution
packet,
the
web
part
instances
are
automatically
updated
across
the
tenant
with
the
latest
version,
and
that
is.
That
is
a
really
important
thing
to
understand.
We
are
always
referring
to
the
same
version.
A
A
Now,
as
we
deployed
the
sbbkt
file
to
the
tenant,
what
actually
happened
was
that
we
extract
it
in
the
app
catalog
client-side
assets,
the
individual
id
of
the
solution.
So
now,
if
I
go
here
and
if
I
go
to
the
app
catalog
where's,
my
catalog
there's
my
app
catalog
and
I'm
gonna
check
the
name
again
client-side
assets,
and
here
and
now,
if
we
go
from
the
url
and
we
say
client
side
assets,
we
can
actually
see
all
of
the
solutions
and
their
assets
which
have
been
installed
within
this
tenant.
A
One
set
of
files
of
truth
within
this
tenant
related
on
this
solution
and
then,
as
we
start
requesting
or
as
the
sharepoint
online
or
browser
start
requesting
this
assets,
then
there's
a
javascript
file.
There's
the
translation
files
multilingual
support,
of
course,
important
and
then
that's
the
actual
javascript
file
which
is
getting
served.
Let's
see
if
we
can
actually
get
it
open.
That's
the
minimized
version
of
the
javascript
file,
which
was
generated
from
our
typescript
from
visual
studio
code.
A
And
this
is
the
outcome.
So
that's
the
per
javascript,
which
is
getting
then
served
in
a
browser
generating
actually
this
web
bar
to
be
visible
in
here
and
that's
how
it
works
behind
of
the
scenes,
the
whole
system,
but
just
to
recap
here.
What
we
did
in
this
part
four
is
that
we
basically
just
did
a
repackaging
of
our
solution.
A
So
we
did
a
cop
bundle.
That's
a
sheep,
not
that's!
Just
both,
I
know
bad
joke,
and
then
we
did
a
gulp
package
solution,
desktop
ship,
and
then
that
gave
us
an
sbbkg
file
which
is
technically
ready
to
get
submitted
to
the
store.
It's
just
ready
to
get
submitted
to
anything
other
within
the
world,
and
it
will
generate
exactly
the
same
outcome.
A
Also.
It
has
the
contextual,
apis
and
contextual
information
based
on
the
site,
where
it's
actually
being
used
so
now
just
to
prove
that
in
a
as
a
final
final
final
30.
Second
demo,
let
me
go
on
the
root
of
the
of
the
tenant.
Well,
on
the
sharepoint
of
the
tenant,
I
will
create
a
site,
let's
create
a
communication
site
here.
A
A
A
Let
me
call
that
the
blank
page.
Let
me
create
that
page
and
there's
my
blank
page.
Let's
call
it
planck,
that's
punk,
that's
blank
and
then
we
can
actually
say
hello
about
report
there
and
we're
getting
that
one,
and
now
the
loading
from
comms
is
different
because
again
we
are
in
the
context
of
this
site
and
this
site
collection.
So
therefore
the
information
is
different,
so
that's
actually
really
cool.
Everything
is
working
as
expected.
A
One
thing
to
also
know
is
just
to
call
out
there's
a
bit
of
a
challenge
that
we've
shown
this
now
with
a
site-specific
deployment-
and
I
mentioned
this
as
part
of
the
tutorials
and
installation
sequences
that
there
is
an
option
to
actually
have
the
web
part
immediately
available
across
the
tenant.
So
that's
part
of
the
settings
which
we
can
controls
and
that's
a
tenant
scope
deployment
option
when
we
have
a
separate
set
of
tutorials
and
documentation
available
for
that
one.
A
So
you
do
not
have
to
explicitly
install
the
solution
to
every
single
site
where
you're
intending
to
use
that
it's
a
really
good
thing
to
understand
as
well.
But
that's
all
we're
going
to
do
in
this
series.
So
we
started
the
the
web
part
creation
series
by
scaffolding
our
first
web
part.
Then
we
added
some
code
on
it.
We
tested
that
code.
We
connected
that
to
the
sharepoint
online.
Then
we
put
the
web
part
on
a
sharepoint
page
and
then
we
did
the
final
packaging
in
this
part.
Four.