Server Side Rendering

[RehanSaeed]

Just read your blog post on Medium which was great. I went down the route of having separate Vue and ASP.NET Core projects and using a Cake script to copy built static Vue files to the wwwroot folder. No need to use multiple commands. The ASP.NET Core project just serves the static files.

Is it possible or even desirable to use server side rendering with ASP.NET Core? Vue has docs for how to manually set it up, I’ve also seen an unofficial Vue CLI plugin (this should be an official plugin, there are issues requesting it that have been closed.) that is a work in progress.

Alternatively, is the best solution to just learn Nuxt? Again, is it possible or even desirable to use ASP.NET Core with Nuxt?

[liborpansky]

Good question! I saw some Vue CLI 3 SSR implementations that worked just fine. With optional vue.config.js you are able to add any webpack configuration you need, so you can set-up both client and server rendering with vue-server-renderer. Configuration of SSR makes config far more complicated than the basic project template vue offers - especially when Vuex store is being used in project... I would probably go with Nuxt, it does a pretty good job with SSR and I saw some existing integrations with CLI 3 also with Vuex.

When I will have a moment, I will try to write something up and describe SSR integration with Nuxt, Vuex and ASP.NET Core.

Actually, I used a script to copy static vue files to wwwroot in all my previous project - but I really liked the way how the new template with JavaScriptServices middleware work. But you're right, script as a temporary workaround before the Vue CLI integration PR will be merged would a good solution.

[RehanSaeed]

I haven't really got a sense of how far removed Nuxt is from the Vue community yet and whether it will be supported a few years from now. In my investigations so far, it seems a lot more far reaching than I expected. I have an existing Vue CLI 3 project, so I think we'll try adding SSR to it manually (Seems complicated but also seems like you could also use ASP.NET Core) but if we start a new project, consider trying Nuxt.

Will look forward to that blog post, thanks for the info.

[mmoore99]

to copy built static Vue files to the wwwroot folder. No need to use multiple commands. The ASP.NET Core project just serves the static files.

@RehanSaeed Could you elaborate on your comment regarding what needs to be done to allow the Asp.Net Core project to serve the static files? Thanks.

[RehanSaeed]

@mmoore99 Yes, no problem. I have two folders in my projects:

• Client - Contains Vue CLI 3 project.
• Server - Contains an ASP.NET Core project with an empty wwwroot folder and a Dockerfile.

I'm using Docker to build, package and deploy my app, the full Dockerfile is below (if you are not familiar with Docker, you can still pick up on what's going on as it's fairly easy to read):

FROM node:10.8.0-stretch AS node
WORKDIR /src/Source/Client
COPY Source/Client/package.json .
RUN npm install
COPY Source/Client/ .
RUN npm run build

FROM microsoft/dotnet:2.1.301-sdk AS dotnet
WORKDIR /src
COPY *.sln ./
COPY Source/Server/Server.csproj Source/Server/
WORKDIR /src/Source/Server/
RUN dotnet restore
COPY Source/Server/ .
COPY --from=node /src/Source/Client/dist wwwroot/
RUN dotnet publish -c Release -o /app

FROM microsoft/dotnet:2.1.1-aspnetcore-runtime AS final
WORKDIR /app
COPY --from=dotnet /app .
ENTRYPOINT ["dotnet", "Server.dll"]

I run npm install, followed by a npm run build to output the dist folder. The COPY --from=node /src/Source/Client/dist wwwroot/ line is where I copy the Vue CLI 3 files from the dist folder to the wwwroot folder of my ASP.NET Core project. The rest is just building and publishing the ASP.NET Core project to a Dockerfile ready to be run.

[mmoore99]

Thanks a lot!

On Wed, Aug 29, 2018 at 1:55 AM Muhammad Rehan Saeed < notifications@github.com> wrote:

@mmoore99 https://github.com/mmoore99 Yes, no problem. I have two folders in my projects:

Client - Contains Vue CLI 3 project. Server - Contains an ASP.NET Core project with an empty wwwroot folder and a Dockerfile.

I'm using Docker to build, package and deploy my app, the full Dockerfile is below (if you are not familiar with Docker, you can still pick up on what's going on as it's fairly easy to read):

FROM node:10.8.0-stretch AS node WORKDIR /src/Source/Client COPY Source/Client/package.json . RUN npm install COPY Source/Client/ . RUN npm run build

FROM microsoft/dotnet:2.1.301-sdk AS dotnet WORKDIR /src COPY *.sln ./ COPY Source/Server/Server.csproj Source/Server/ WORKDIR /src/Source/Server/ RUN dotnet restore COPY Source/Server/ . COPY --from=node /src/Source/Client/dist wwwroot/ RUN dotnet publish -c Release -o /app

FROM microsoft/dotnet:2.1.1-aspnetcore-runtime AS final WORKDIR /app COPY --from=dotnet /app . ENTRYPOINT ["dotnet", "Server.dll"]

I run npm install, followed by a npm run build to output the dist folder. The COPY --from=node /src/Source/Client/dist wwwroot/ line is where I copy the Vue CLI 3 files from the dist folder to the wwwroot folder of my ASP.NET Core project. The rest is just building and publishing the ASP.NET Core project to a Dockerfile ready to be run.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/SoftwareAteliers/asp-net-core-vue-starter/issues/1#issuecomment-416877841, or mute the thread https://github.com/notifications/unsubscribe-auth/AACv3s0uAImqjCvCb8vTv4NHb81nPayPks5uVlbygaJpZM4WM0CA .