BitBucket Pipeline: Adding NodeJS for Gulp on the microsoft/dotnet:sdk image

Question

I have an ASP.NET Core application. It uses Gulp to convert Sass to CSS among other things. I have already modified my .csproj file to have the Gulp task(s) run prior to a publish. This is to ensure I have all my JS and CSS in place in the artifacts.

<Target Name="PrePublishScript" BeforeTargets="PrepareForPublish">
  <Exec Command="npm install" />
  <Exec Command="gulp" />
</Target>

Here is my BitBucket Pipeline file:

pipelines:
  branches:
    master:
      - step:
          name: Build
          image: microsoft/dotnet:sdk
          caches:
            - dotnetcore
          script:
            - export PROJECT_NAME=YeGods.sln
            - dotnet restore
            - dotnet build $PROJECT_NAME
            - dotnet publish $PROJECT_NAME --configuration Release --output dist --verbosity minimal
          artifacts:
            - YeGods.Web/dist/**
      - step:
          name: Deploy
          image: alpine:3.8
          script:
            - apk add --update openssh
            - ssh deploy@$SERVER_HOST 'bash -s' < $BITBUCKET_CLONE_DIR/pre-deploy-script.sh
            - scp -r YeGods.Web/dist/* deploy@$SERVER_HOST:$SERVER_PATH_TO_SITE_DIRECTORY
            - ssh deploy@$SERVER_HOST 'bash -s' < $BITBUCKET_CLONE_DIR/post-deploy-script.sh

This currently fails, because the npm install script-call fails as there is no NodeJS installed in the microsoft/dotnet:sdk image. I suspect all I have to do is get NodeJS installed in another script-call before this - export PROJECT_NAME=YeGods.sln. So I added apt-get install nodejs but that didn't work. It said it couldn't find nodejs.

If what line of thinking is right, what is the correct way of getting NodeJS installed onto the microsoft/dotnet:sdk image?

Answer 1

I have an article on this exact issue, here is a summary:

Solution 1:

You need a docker image which also has both dotnet and node installed. This can be easily done by extending the official dotnet images from microsoft by installing nodejs. But you do need to know how to use docker.

This can be a good opportunity to learn docker if you didn't already, there are plenty of tutorials available online.

I've did this before and uploaded my docker image to docker hub so that Pipelines can use it. It's publicly available on dockerhub, but you should really not use images of people who don't trust, but if you still want to test change image: microsoft/dotnet:sdk to image:peterekepeter/dotnet-node-sdk:latest

Here is a Dockerfile example how to take the dotnet image and install nodejs onto it:

FROM microsoft/dotnet:2-sdk

# install nodejs for building & testing frontend

RUN curl -sL https://deb.nodesource.com/setup_10.x  | bash -
RUN apt-get -y install nodejs
RUN node -v

Solution 2:

Separate the frontend build to a separate Pipelines step and run gulp tasks on a docker image which has nodejs installed. If you have build dependencies between the two steps, persist them using artifacts.

But for this to work you'll need to modify your build scripts, remove gulp command from csproj project, and run them as part of a pipelines script.

Here is an example how to do this:

pipelines:
  default:
    - step:
        name: .NET Core build & test
        image: microsoft/dotnet:2-sdk
        caches:
          - dotnetcore
        script:
          - dotnet restore
          - dotnet build --no-restore
          - dotnet test --no-build --no-restore
    - step:
        name: Frontend build & test
        image: node:6.9.4
        caches:
         - node
        script:
         - npm install
         - npm run build
         - npm run test