►
From YouTube: Community demo - DevOps pipelines, and how-to setup SPFx configuration per environment?
Description
This community call demo is taken from the SharePoint General Development Special Interest Group recording on 7th of March 2019.
In this video Velin Georgiev (Pramerica) shows how to setup SharePoint Framework configuration for DevOps per your target environment.
Presenter - Velin Georgiev (Pramerica) - @VelinGeorgiev
Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-7th-of-march-2019
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
My
name
is
villain.
You
give
and
I'm
a
SharePoint
developer
for
a
very
long
time.
Today
we
are
going
to
talk
about
DevOps
pipelines.
As
mentioned
this
I
mentioned
it.
It
covers
SPF,
x4,
now
Pallavi.
This
is,
as
you
said,
more
related
to
ALM
ApS
and
in
future,
we'll
show
how
you
can
add
dotnet
core
or
PNP
core
components
here
and
built
and
bundle
and
deploy
along
with
the
the
SharePoint
framework
packages.
This
is
maybe
just
the
start.
A
So
today
we're
going
to
talk
about
how
to
set
up
a
different
configuration
for
your
SharePoint
framework
solutions,
so
you
have
different
environments
and
those
packages
might
require
different
configuration
for
the
Deaf
environment,
running
new
features
and
a
different
configuration
for
the
production
environment
that
is
supposed
to
be
stable
and
the
new
features
are
not
supposed
to
be
there
if
they're
not
ready.
So
this
is
a
follow
up
from
the
previous
two
demos
as
near
demo
number
three
and
we
already
covered
built
Basics
in
the
lace
basics.
So
these
are
follow
up.
A
Some
things
might
not
be
demoed
here,
so
I
recommend
you
go
there
if
you're
missing
a
piece
of
information
and
see
what
is
in
there
and
today
we're
going
to
just
follow
up
on
our
previous
discussion.
So
let
me
just
I'll
be
using
github
as
well
again.
My
source
code
is
in
github
and
it's
linked
to
Asia
devotes.
So
this
is
the
demo
how
we
ended
the
demo.
A
Last
time
we
had
a
development
release,
task
here
and
production
delays
and
we
were
releasing
a
package
to
our
dev
environment
and
the
same
package
to
our
production
environment.
So
what
it
means
is
in
our
artifacts.
We
were
we're
having
that
package,
HP
FX
package
that
we're
releasing
to
both
environments.
However,
it
is
not
with
optimal,
because
in
many
of
the
cases.
A
Basically,
we
have
two
packages
that
are
the
same,
but
they
have
different
configuration
and
by
different
configuration,
I
mean
like
I'll,
go
to
resource
code
here
and
I'll
show
you
my
solution.
My
solution
has
ice
cream
shop
and
ice
cream
lorry
web
parts
for
the
ice
cream
shop
is
ready
for
production
and
the
ice
cream.
Lorry
is
now
ready
for
production,
and
the
business
doesn't
want
to
include
that
into
the
other
package.
A
So
the
way
we
can
control
our
feature
seized
from
the
config
JSON
here
and
we
have
both
web
parts,
but
the
difference
should
be
like
I
don't
need
after
production,
it's
not
ready,
so
we
have
to
exclude
it,
but
somehow
we
have
to
included
in
the
production.
So
how
we
do
that.
Another
business
scenario
might
be
that
you
have
some
settings.
A
For
example,
my
app
settings
are
bundled
with
the
package
and
I
have
different
values
here
that
I'm
using
my
web
parts
are
using
as
a
shared
of
alias
and
as
I
can
see,
I'm
accessing
the
DEF
tenant
here,
but
for
production
that
value
should
be
production,
so
I
can
hit
the
production
tenant.
That
might
be
another
scenario
and
how
we
can
change
on
the
fly,
how
we
can
change
that
with
the
builds
and
releases
so
I
will
just
save
that
and
I
will
show
you
what
we
have
here.
A
So
here
we
have
a
DevOps
folder
I've
created
that
lemmas.
That's
not
part
of
the
SharePoint
scaffolded
project,
so
I've
created
up
folder
and
another
that
folder
we
have
a
build.
Where
all
our
build
definitions
are.
We
have
release
where
we
have
the
release
quits,
but
we
also
have
a
folder
called
configurations.
A
So
enough
folder,
we
have
a
broad
folder
and
we
might
have
queue
a
staging,
whatever
environment
you
have
and
and
underneath
we
have
a
config
and
under
the
config
we
have
an
our
config
Jason.
So
you
can
see
that
from
this
folder
I'm
trying
to
replicate
whatever
is
in
the
root
folder.
So
under
config
we
have
config.
Here
we
have
config
here
we
have
that
Jason
there
and
we
have
that
Jason
there.
So
the
difference
here
is
the
def
Jason
have
both
web
parts
and
that
config
here
has
the
own.
A
Only
that
the
web
products
is
so
supposed
to
be
in
production.
Then,
on
the
other
hand,
we
have
a
source
and
it
out
source
again
I'm,
trying
to
exactly
replicate
the
same
folder
structure,
as
is
here
that's
very
important
later
and
in
that's
very
same
structure.
We
have
source
source,
webparts
webparts,
and
then
we
have
ice-cream
shop.
We
have
it
here
and
then
down
below.
We
have
the
manifest
right,
and
here
we
have
the
manifest
and
you
can
have
a
different
set
up
on,
even
even
on
our
web
part
level.
A
A
For
now
in
production
we
are
full
bleed
and
then
on
the
up
settings
again
up
settings
the
same
vocation
as
in
the
root
folder
up
settings,
the
same
absolutely
the
same
folder
structure,
but
here
we
have
prod
and
we
have
the
assets
is
different
version
or
whatever.
Now
how
we
put
that
into
our
pipeline.
We
already
have
those
configurations
here,
but
what
we
are
supposed
to
do
so
here
is
our
build
here.
Our
build
definition
is
again
the
same
I'm,
a
file
from
the
previous
time,
but
slightly
modified.
So
we
have
trigger
that's
master
branch.
A
We
have
compute
here
of
your
emotion
to
run
the
scripts.
We
install
no
GS
on
that
machine,
so
we
can.
We
can
do
things
with
gold
and
then
here
is
the
the
interesting
part
here.
So
what
we
are
doing
is
we
are
copying
all
the
files
from
the
source
directory
so
that
that
is
a
variable
that
tells
either
native
of
pipelines
that
the
storage
directory
in
all
the
files
in
the
source
directory
should
be
moved
to
a
staging
directory.
A
So
basically
just
move
to
another
folder,
but
not
just
to
the
staging
directory,
but
staging
slash
def,
so
I'll
be
moving
all
the
miles
into
that
the
folder
and
after
I
move
all
these
files,
I
will
say:
go
to
that
folder
install
all
the
modules,
bundle
and
package
the
solution
and
then
zip
it
and
make
it
available
in
Asia
DevOps.
So
at
the
end
we
have
the
dev
package
there.
A
All
we
did
so
far
is
we've
just
moved
the
files
all
these
valves
from
one
folder
to
another,
and
we
executed
the
usual
commands
here
to
package
and
is
our
dev
package,
but
for
the
production.
Then
we
continue
that,
like
we
say,
copy
all
the
files
again
from
that
source
directory
into
another
folder.
That
is
a
slash
production
flash
prod.
So
we
move
all
the
files
again
in
that
new
folder,
and
here
is
the
moment.
The
simple
trick
that
we're
doing
to
overwrite
those
files.
A
So
what
I'm
seeing
here
like
that's
the
most
important
part
of
the
demo
baby?
So
what
I'm
doing
here
is
I'm
saying
go
through
that
folder,
the
prod
folder
grab
all
these
underneath
and
move
them
back
to
the
root
folder.
So
what
that
will
do
is
that
will
just
override
everything
that
you
have
here
with
everything
that
is
underneath
here.
A
So
I'll
do
a
small
change
to
see
how
this
works,
because
I
already
have
that
pipeline
prepared,
but
I'll
do
a
small
change
in
the
files
for
you
to
see
that
it's
just
running.
So
that's
my
production
environment
and
you
can
see
the
app
settings
here,
they're
saying
prod,
1
2
3
and
they
now
change
that.
A
Okay,
let's
see
what's
happening,
we
go
to
our
DevOps
and
we
go
to
our
build
and
we're
trying
to
see.
If
something
is
going
to
change.
Oh
there
you
go
so
we
have
a
built
and
that
build
will
try
to
execute
all
these
steps
in
the
mo
file.
So
I
will
try
to
find
available
agent
I'm
using
the
free
agent
Microsoft
offer,
and
it
will
try
to
run
all
these
steps
one
by
one
while
we're
waiting.
A
I'll
just
recap:
what
just
happened
in
the
build
I
have
two
three
slides
here
so
again:
we're
copying
from
the
source
directory
all
the
files
as
they
are
into
a
new
folder
called
dev,
and
we
have
everything
as
this,
the
only
parties
that
we're
compiling
whatever
we
have
in
the
service.
Now,
on
the
other
side,
the
the
prod
package,
we
are
copying
everything
into
a
prod
fault,
but
there
is
a
nice
animation
here
like
we
are
overriding
whatever
is
in
the
source
with
those
configurations
from
from
that
folder,
and
then
we
do
the
compilation
now.
A
This
is
not
changing
anything
in
your
source
control,
so
this
is
running
just
on
the
the
VM
that
is
creating
the
build
then
that
VM
is
destroyed.
So
your
source
control
is
not
growing.
You
don't
have
to
do
anything
else.
It's
just
one
time
override
here
for
your
information
and
another
thing
is
why
we
have
a
prod
in
a
dev
folder
here.
Why
don't
don't
I?
Why
can
I
just
override
run,
npm,
install
and
override
yeah
and
run
npm
install
in
the
same
directory?
A
Well,
for
me,
it's
simple
because
I'm
moving
those
to
a
separate,
prod
and
dev
folders,
simply
because,
if
you
have
a
package
jason
with
different
packages
and
you
execute
em
can
install
my
course-
conflicts
right.
You
npm
install
for
death
and
in
UMP
install
for
production
in
the
same
directory
that
might
cause
conflicts.
That's
the
reason
and
the
build
is
already
there.
There
is
just
one
more
thing.
I
want
to
show
you,
because
the
build
is
not
enough.
A
Here
is
my
release
file
and,
in
my
release,
file
I
have
an
extra
I,
have
an
extra
variable
here
and
that
variable
is
stored
in
the
variables
and
you
have
an
extra
details
to
say.
Okay,
if
that
variable
is
to
is
def
true
pick
up
the
DEF
package
and
deploy
it
if
that
variable
is
false.
Just
deployed
production
package
that
is
difference
in
in
here
and
the
variable
is
stored
in
the
release
pipeline
here
in
the
variables.
A
So
this
is
how
you
can
control
your
your
settings
inside
your
package
and
next
time
we
will
talk
about
a
parallel
execution,
because
running
anything
is
told
twice
in
a
sequence
is
taking
too
long
so
in
the
next
demo
will
show
parallel
execution,
and
we
will
raise
windows
against
linux
to
see
if
we
can
break
the
myth
that
linux
compose
no
g
is
called
better.
Okay,
that's
neither
sir
thank
you
valiant.
Thank
you.