Search code examples
reactjsazure-devopsazure-web-app-servicenode-sass

Deploying to Azure Linux Web App I get To import Sass files, you first need to install node-sass


When I deploy my React App which was created using Create-React-App to Azure Web App on Linux I get the following when I browse to the website?

To import Sass files, you first need to install node-sass.

When I run this locally everything is fine (Running from a Mac). I have checked the DevOps deployment log and that reports it installed node-sass without issue. I have also tried to delete the node-sass folder in node_modules and npm install. This added node-sass again without issue but still I get the error?

Has anyone come across this before or have any suggestions?

This is the Yaml File.

# Node.js React Web App to Linux on Azure
# Build a Node.js React app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: '<Remove for Security>'

  # Web app name
  webAppName: '<Remove for Security>'

  # Environment name
  environmentName: '<Remove for Security>'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:  
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool: 
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:            
          - task: AzureRmWebAppDeployment@4
            displayName: 'Azure App Service Deploy: <Remove for Security>'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              WebAppName: $(webAppName)
              packageForLinux: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              RuntimeStack: 'NODE|10.10'
              StartupCommand: 'npm run start'
              ScriptType: 'Inline Script'
              InlineScript: |
                npm install
                npm run build --if-present

Solution

  • I had a similar issue with another node package. In such cases where node packages do not get resolved try installing your node package globally using -g flag.