A React + IIS Website GitLab CI/CD YAML Example

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

 

Gitlab

My Top 5 Reasons To Start Using CI/CD

For the first half of my career we moved code from our local machines -> dev -> test -> production the old cowboy way, just by copy & paste from one environment to the next. It’s quick and easy but also riddled with holes. Now we’ve got better ways of doing things with processes like CI/CD and source control systems like Gitlab and Github. Here are my top five reasons why you should have a CI/CD process or pipeline set up into your development workflow:

  1. Each commit can be traced to a specific environment allowing developers to see what code is in production or test at any given time.
  2. If you’re pasting files around, you can easily blow away or overwrite something you didn’t mean to.
  3. CI/CD pipelines let you can roll back commits and changes with the click of a button if you break something. Thus keeping you from scrambling to find that backup folder you created (or didn’t) before moving the code to production.
  4. Check in your code and forget. CI/CD pipelines will automatically move your changes to your environments for you.
  5. Pipelines will run unit and integration tests before deploying code. If the tests fail the migration is halted so breaking changes never make it to production.

This getting started guide for Gitlab is a good place to start with CI/CD.