A React + IIS Website GitLab CI/CD YAML Example

May 12, 2021

GitLab CI/CD is a pretty big part of my deployment strategy with the React websites that I build. My current engagement has me pushing to a Windows IIS server via GitLab’s continuous integration/deployment, so I wanted to post an example of the YAML file that makes it all happen. Without going into the in’s and outs of how GitLab CI/CD works, here’s an example of my GitLab YAML template that I use for React websites on IIS servers.

There are a couple prerequisites that need to be in place if you’re going to use this file:

  1. Starting off this build server is a windows machine, any other set up requires a few updates.
  2. The build server needs to have NPM, NodeJS and MS Web Deploy V3 installed. Install MS Web Deploy on the build and web server.
  3. $CI_USERNAME and $CI_PASSWORD are GitLab secrets. CI_USERNAME should have access to the IIS server.
  4. The IIS website is set up for Basic Authentication permissions.

That’s it. Let me know if you run into any issues or have questions.

stages:
 - build
 - deploy

before_script:

- echo BEGINNING

#------------------------------------------------------------------------------------
#------------------------------------------------------------------------------------

#----------------------------

# Build Website Pieces

#----------------------------
build_web_production:
stage: build
script: - $Env:Path += ";C:\Program Files\nodejs"
    - npm install 
    - npm run build
  only:
    - main
  artifacts:
   paths: 
    - "$CI_PROJECT_DIR/build"
environment:
name: production
url: http://example.com
tags: - shell
#----------------------------

# End Build Website Pieces

#----------------------------

#------------------------------------------------------------------------------------
#------------------------------------------------------------------------------------

#----------------------------

# Deploy Website Pieces

#----------------------------
deploy_web_production:
stage: deploy
only:

- main
  script:
- $Env:Path += ";C:\Program Files (x86)\IIS\Microsoft Web Deploy V3\"
- msdeploy -verb:sync -source:contentPath="$CI_PROJECT_DIR/build" -dest:contentPath="IIS_WEBSITE_NAME",ComputerName="https://IISSERVER:8172/msdeploy.axd?site=IIS_WEBSITE_NAME",UserName=$CI_USERNAME,Password=$CI_PASSWORD,IncludeAcls='False',AuthType='Basic' -skip:objectName=filePath,absolutePath=.\*web\.config -enableRule:AppOffline -disableLink:AppPoolExtension -disableLink:ContentExtension -disableLink:CertificateExtension -allowUntrusted -userAgent="VSCmdLine:WTE1.0.0.0"
  dependencies:
- build_web_production
  environment:
  name: test
  url: https://example.com
  artifacts:
  paths:
- "$CI_PROJECT_DIR/build"
  tags:
- shell