Not having any luck deploying react template apps to AWS S3

ServiceStack
1

I must be missing something. I followed the deployment instructions for a react app to a static s3 website bucket. I can do it just fine using a bare bones react app using create-react-app but when I use either x new react-spa or x new react-lite, and I create published build of it and copy it to S3, the page doesn’t seem to be rendering correctly and it throws a bunch of errors about ServiceStack. Is there something unique to a ServiceStack react app that needs to be factored in when deploying to a static s3 website?

I’ll work on a repro.

2

This is not helpful, if you don’t provide the actual exceptions & invalid rendered output there’s no point posting about it. It just wastes time having to ask for it. Think about what it would take for you to be able to identify the issue & include all necessary context.

If you can publish the app and run it from the published folder, i.e:

$ dotnet publish -c Release
$ cd bin\Release\netcoreapp3.1\publish
$ dotnet ProjectName.dll

and it runs fine locally, there’s nothing wrong with it, i.e. it’s a regular .NET Core App.

3

It doesn’t need the .NET part for the static pages does It? Plan is to host the react part on S3 and host the. NET API backend part on EC2.

4

What static pages? It’s a regular .NET Core App not a static website generator.

5

I can create a new react app with create-react-app and publish it to S3 and it works, no web server needed. If data is needed you just use the fetch API to call out to a remote hosted .NET API. Is this not the case here?

6

No, keep using create-react-app or even better a purpose built for task React framework like Next.js.

Or if you’re willing to consider Vue, Nuxt.js is a similar inspired framework for Vue. See Nuxt Project Templates for more info.

7

Your nuxt template looks interesting. I’ll give that a spin.

8

I took x new vue-nuxt for a spin and I have to say I LOVE it! Exactly what we were looking for!

Now, the problem. Since I’m not well versed in Dockerfile, I can’t quite figure out how to get both a dotnet and node build going at the same time. We do this because we want to deploy to AWS ECS but I can’t get past this part.

Since the Dockerfile provided by Visual Studio only provide dotnet instructions, we getting stopped by this code in the proj file

  <Target Name="OnFirstUse" BeforeTargets="Build" Condition=" !Exists('wwwroot\dist') ">
    <Exec Command="node --version" ContinueOnError="true"><Output TaskParameter="ExitCode" PropertyName="ErrorCode" /></Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
  </Target>

We’re SO close…

Dockerfile looks like

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build

WORKDIR /src
COPY ["VueNuxtApp1/VueNuxtApp1.csproj", "VueNuxtApp1/"]
COPY ["VueNuxtApp1.ServiceInterface/VueNuxtApp1.ServiceInterface.csproj", "VueNuxtApp1.ServiceInterface/"]
COPY ["VueNuxtApp1.ServiceModel/VueNuxtApp1.ServiceModel.csproj", "VueNuxtApp1.ServiceModel/"]
RUN dotnet restore "VueNuxtApp1/VueNuxtApp1.csproj"
COPY . .
WORKDIR "/src/VueNuxtApp1"
RUN dotnet build "VueNuxtApp1.csproj" -c Release -o /app/build



FROM build AS publish
RUN dotnet publish "VueNuxtApp1.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "VueNuxtApp1.dll"]

Which again, would normally work, but in this project case, we also need Node.

9

Question: Is Node only needed to do the initial build of the Vue parts? In other words, after the static content is generated and deployed to a static host, is Node needed any longer? I’m a bit confused here. I thought only the dotnet core backend was needed in production.

10

Node is used by Nuxt.js to generate the dev watched and static release build, it’s not needed at runtime.

I’ve not tried a combined dotnet & node Docker build, but you’d have to start by installing node:

11

Ok, so that’s actually great news! Might be easier to just separate out the build process for each. Since I’m still experimenting with this, a full CI/CD isn’t necessary right now so I can just continue to manually build the Vue part locally and deploy to S3, while I CI/CD the dot net part. I’ll eventually look into making this more automated as per the referenced article.

Thanks for suggesting this template. I had never dived into Nuxt before and now that I have along with full ServiceStack sugar, it’s an amazing thing!

1 Like