Hey guys,
Is there a walkthrough/documentation/collateral to assist in porting one of the ServiceStackVS SPA templates to .Net Core running Kestral?
[RB]
No, but we’re going to create SPA templates for .NET Core after v5.
cool - thanks for the quick reply.
In the meantime, I created a Vue App project and a separate .NET Core project by following your step-by-step guidance for creating a bare-bones .net Core app (in the latter part of this article. Both are working in isolation.
I’m currently trying to copy the js/vue/webpack/src assets across to the latter project but running into a host of npm/gulp-related issues. Is there something specific that I could have done to better prepare/configure the .net core project to receive the assets, or is there somewhere specific I could look to save myself some frustration, or perhaps a better approach than the one I’m attempting?
I’m running VS2017 (15.3.3) with nodejs 6.11.0, npm 3.10.10 and Typescript 2.3
The SPA templates are a big task to port with a lot of inter-mixed deps/config working together, it’s going to take ourselves a fair bit of research to find the optimal project structure for .NET Core which we’re only going to be able to look at after v5 when the .NET v4.5/Core packages are merged together. I don’t have any approaches that makes it any easier until then.
understood - thanks Demis
FYI I just created a .NET Core 2.0 Vue SPA App which uses the latest ServiceStack v5 that’s now available on MyGet at: https://github.com/NetCoreTemplates/vue-app
Currently you’ll need to clone it or download the zip, but in future we’ll create a script that will make it easy to replace the MyApp project name with a custom project name. You should be able to open this project with you’re favorite .NET IDE, e.g. VS 2017, Rider or VSCode. If you’re using VS/Rider after opening it wait for it to install the npm packages then run/debug the project which should automatically run a webpack build of first use. Effectively this runs the following commands which you can also run manually:
npm install
npm run build-vendor
npm run build
This Template is similar to the Vue SPA Template except it’s been modified to use Webpack’s DllPlugin for faster build times and for publishing / deployments we’re just going to be using .NET Core’s dotnet publish which you can run with:
npm run publish
Which will generate a production optimized build and dotnet Release build in the bin/Release/netcoreapp2.0/publish output folder, which you can then xcopy/rsync to any deployment server similar to deploying .NET Core 2.0 Web Apps.
All the template features are available as both npm scripts and gulp scripts (which just call the npm scripts), which you can run with:
npm run <script-name>
Which currently includes:
npm run dev
npm run watch
npm run build
npm run build-prod
npm run build-vendor
npm run publish
npm run test
npm run test-watch
npm run typescript-ref
This may or may not be relevant to you as I don’t use the SS templates, but have a separate vue spa project from the SS backend with webpack compiling the front end like this:
module.exports = {
entry: {
'app': './src/app/app.ts',
'login': './src/login/init.ts',
},
output: {
path: path.resolve(__dirname, '../../02-BackEnd/PROJECTNAME/wwwroot/js'),
publicPath: '/js/',
filename: process.env.NODE_ENV === 'production' ? '[name]-[hash:6].min.js' : '[name].js'
},
// elsewhere.....
npm run compile:prod
that is really fantastic, Demis - thank you!
I’ll give it a gander and let you know if I have any questions/comments/impressions…
as usual - I LOVE the way that you guys manage your community and respond to change. There are many large, prominent companies whose client experience and software quality come nowhere close - despite the amount of money they throw at it.It is a pleasure to be your customer…
1 Like
thanks lucuma - I have something similar in my current incarnation as well 
1 Like
ok I’ve just published a dotnet-new script you can use to create projects from the different templates in: https://github.com/NetCoreTemplates
It’s included as part of servicestack-cli project from v0.0.7. If you had a previous version installed you’ll need to remove it:
npm uninstall -g servicestack-cli
So you can install the latest version:
npm install -g servicestack-cli
This makes the dotnet-new script available which you can use to view all the available templates with:
$ dotnet-new
Which at this time will print out:
Then you can create a project from one of the templates, e.g:
$ dotnet-new vue-app Acme
Which will generate a new project with the folder names and source files replaced with your project name, e.g:
You can run then run the Acme.sln in VS2017 which will automatically restore and install both the .NET and npm packages when first loaded. This can take a bit of time to install everything, once it’s finished you’ll see the wwwroot folder populated with your generated Webpack app that includes a dist folder and index.html page. After this you can just run F5 to run your App.
If you’re using JetBrains Rider you can install npm packages by opening package.json and run the “npm install” tooltip on the bottom right. In VS Code you’ll need to run npm install from the command-line.
To develop your App I would run Webpack watch on the command-line with:
$ npm run watch
Which will watch and re-compile your App for any changes. These new templates also include a new hot-reload feature which works similar to ServiceStack Templates hot-reloading where in DebugMode it will poll the server every 1s for any modified files in wwwroot and automatically refresh the page. This provides a hot-reload alternative to npm run dev to run a Webpack Dev Server proxy on port http://localhost:3000
That should get you up an running. There aren’t any known issues with the templates we’re aware of, if you find any please let me know!
Hi guys,
I uninstalled/reinstalled the cli (globally), ran the cli commands and waited for npm restore to complete - I am getting the following error during webpack build :
I am running npm 3.10.10 and node 6.11.3. I was wondering if this could be a typescript update causing the issue (I see in the vuejs release notes that typescript 2.6 compatibility was fixed 9 days ago)?
For the server error you need to fetch the latest v5 on MyGet by clearing your local NuGet cache:
$ nuget locals all -clear
Then fetch the latest MyGet packages again with:
$ dotnet restore
For the Vue Error I just created a new
$ dotnet-new vue-spa Test
and it installed without issue:
$ npm install
where I could run it with:
$ dotnet run
and load http://localhost:5000 to see it running without issues. I’m using node 8 and npm 5:
$ node -v
$ v8.1.2
and:
$ npm -v
$ 5.0.3
I’ve also tried with both typescript v2.6.1 and typescript 2.5.2, both build fine.
thanks for the response, Demis.
I upgraded npm and node with no joy, and then finally spotted an error message related to SASS compilation in the build output (from the command line - I don’t think the error was present in the output in VS).
running the following fixed the issue :
npm rebuild node-sass --force
This can happen with native modules like node-sass in VS.NET when the node.exe version that ships with VS.NET is different to the node.exe installed as the native module that’s built is dependent on your OS and node.exe version. So when the templates is first installed it’s installed with VS.NET’s version of node.exe but when the Webpack build is run it uses your Desktop version of node.
A recommended workaround is to add "C:\Program Files\nodejs" to your Tools > Options > Projects and Solutions > External Web tools which will get VS.NET to use the same Desktop node.exe to install the packages and run the build.
that makes sense - thanks for the time and attention, sir 