search

PacktPublishing / ASP.NET-Core-2-and-Vue.js

ASP.NET Core 2 and Vue.js, published by Packt
MIT License
37 stars 34 forks source link

can not run app after removing TypeScript #1

Closed melvik closed 6 years ago

melvik commented 6 years ago

Hi, In chapter 3: Refactoring the frontend setup

Im trying copy your instructions but when I run app after removing typescript by using dotnet run app starts in locolhost:5000 but keeps saying loading... screenshot >> https://ibb.co/m9CDLK

sturatcliffe commented 6 years ago

Hey,

Have you tried cloning the source code, checking out the chapter3 branch and double checking everything matches up?

Are there any errors in the output window of VSCode / visual studio? Also double check all the package versions match what was used at the time of writing.

Failing all of the above, can you upload a sample repo that produces the issue as I am unable to reproduce it?

Thanks

melvik commented 6 years ago

Hi, Thanks for your prompt reply and sorry for my slow response. yes I tried your code from Chapter3 and except some small css stuff in webpack I couldnt find any major difference. Also I was not able to run your code (Chapter3) I installed npm packages but still no go. here is the report:

npm install npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but npm-shrinkwrap.json was generated for lockfileVersion@0. I'll try to do my best with it!npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated clone@1.0.2: XSS vulnerability fixed in v1.0.3 npm WARN deprecated coa@1.0.3: Please upgrade to 1.0.4 for node 0.10, 0.12, or to 2.0+ for node 4+ npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 416 packages from 452 contributors and audited 1594 packages in 51.279s found 9 vulnerabilities (6 low, 2 moderate, 1 critical) run npm audit fix to fix them, or npm audit for details

$ dotnet run
C:\Program Files\dotnet\sdk\2.1.401\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.ObsoleteReferences.targets(33,5): warning NETSDK1059: The tool 'Microsoft.EntityFrameworkCore.Tools.DotNet' is now included in the .NET Core SDK. Information on resolving this warning is available at (https://aka.ms/dotnetclitools-in-box). [C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3\ECommerce.csproj]
C:\Program Files\dotnet\sdk\2.1.401\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.ObsoleteReferences.targets(33,5): warning NETSDK1059: The tool 'Microsoft.EntityFrameworkCore.Tools.DotNet' is now included in the .NET Core SDK. Information on resolving this warning is available at (https://aka.ms/dotnetclitools-in-box). [C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3\ECommerce.csproj]
Module not found : error : Can't resolve 'bootstrap' in 'C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3' [C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3\ECommerce.csproj]
Module not found : error : Can't resolve 'jquery' in 'C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3' [C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3\ECommerce.csproj]
_**Module not found : error : Can't resolve 'bootstrap/dist/css/bootstrap.css' in 'C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3' [C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3\ECommerce.csproj]
C:\Learning\Vue.js\ASPDotNETCore2andVuejs_Code\Chapter03\Hands-On-ASP.NET-Core-2-and-Vue.js-chapter3\ECommerce.csproj(19,5): error MSB3073: The command "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" exited with code 2.**_

The build failed. Please fix the build errors and run again.

Here is my repo: https://github.com/melvik/ASP.NET-Core-2-and-Vue.js

I will appreciate your time and help. Im kinda new in Vue but not in ASP.NET

And I have a fundamental question. Based on my understanding by using vue template for ASPNET project ASP.NET is running first and then after loading index page (by default) then we are injecting the Vue runner by 

@section scripts {
    <script src="~/dist/main.js" asp-append-version="true"></script>
}

Amusing webpack is going to run the build and ... but in this case we will lose the debug options since it's using build version from dist folder correct? Am I right or Im missing something here. Please advice. Thanks in advance

sturatcliffe commented 6 years ago

Apologies for the slow response Melvik. I've opened a PR on your repo with the fix. For anyone else looking at this issue, the problem was that the webpack.config.vendor.js file still had the Bootstrap and jQuery NPM modules listed as dependencies in the "vendor" array - roughly line 14.

See the following PR on Melvik's repo for more info:

https://github.com/melvik/ASP.NET-Core-2-and-Vue.js/pull/1

sturatcliffe commented 6 years ago

@melvik - as for your question:

If we isolate the Vue side of things and imagine we are just building a client-side application with Vue (no backend at all), we use Webpack to "build" the application into plain old javascript files that can be included in an HTML page and run in the browser.

Webpack bundles together all of the different files such as components, filters, Vuex store modules etc, into one or two files that encompass the whole application. It knows how to combine the files in the correct order based on the dependency tree. This means we only need one or to script tags for our bundled JS in the HTML, rather than needing to include every single file that makes up the application.

When throwing ASP.NET Core into the mix, we hook into the build process to run webpack and build the client application at the same time that we build the server application, and drop the bundled JS files into the wwwroot folder so they are served by MVC. The code you included above is where we inject that JS file into the MVC view that is rendered when you load the application. Once that hits the browser, Vue.js kicks in and renders the app into the HTML element defined in the ClientApp/boot.js file.

When running in development, the client app still needs to be bundled into files that can be run by the browser, but the configuration includes source maps so that your browser console can tell you which file an error occurred in, which aids in debugging client issues. When you publish the .NET Core application, webpack has an additional --env.prod flag attached which optimises for production according to the main webpack.config.js file.

Essentially the difference is that sourcemaps are not included, the JS is "Uglified" (or minified), and the CSS from our Vue components is extracted into an external CSS asset file.

If you look at the be-master-with-core2.csproj file, there is a DebugRunWebpack hook which runs before every build, and triggers webpack to build the client assets (this is what was failing in your repo). Then slightly further down there is a PublishRunWebpack hook which runs after computing the files to publish, and also triggers webpack. However, you'll notice the --env.prod flag here to indicate a production build.

Now look in the webpack.config.js file - from line 37 onwards there are webpack plugins defined which apply to development / production builds only. For development the SourceMapDevToolPlugin is used, and for production the UglifyJsPlugin and ExtractTextPlugin are used.

Hope this helps, feel free to DM me if you need other clarification!

melvik commented 6 years ago

Thanks for your time and descriptions. May I please ask you to check my repo again? I just pushed my changes including your PR and I still have the same issue. main.js is not generating so im getting 404 error. But I clone your forked one and it was working .

BTW, dont you think using vue template for dotnet CLI (as we did for this sample project) is a bit overfilling? now its running MVC in order to get a MVC view and then inject vue.js? I think if we create our front-end project with Vue CLI and then create a separate project for back-end (dotnet Core CLI ) as an API would be a better option.

I would appropriate your inputs.

sturatcliffe commented 6 years ago

Morning,

I will certainly have another look at your repo this evening when I get home from work. There are a few benefits to serving the client from an MVC application: 1) First and foremost the book is aimed primarily at .NET developers who are comfortable with MVC, and looking for an introduction to modern SPA development with Vue. Microsoft provide a nice set of templates to help with this, so it made sense to use one as readers were likely to be familiar with the approach. 2) By serving the application from MVC you don't need to configure CORS, which takes away one potential area for readers to hit problems if their configuration isn't quite right, and until the SSR chapter later in the book there is no need to manage client-side environment variables for the URL of your API. 3) Deployment is simplified significantly by combining the two applications into one. If we were to develop an API and client-side SPA as separate applications, the deployment of the full app becomes more complex.

Don't get me wrong, you are absolutely right in that it would certainly make sense to split the client / server aspects into separate applications in a lot of scenarios. This is what I tend to do with real world applications that I develop at work, and if you are interested I would strongly recommend looking into https://nuxtjs.org/ as a super easy way of building server-rendered Vue.js applications. There are so many different ways that we can build and run modern SPA's, there really isn't a right/wrong way, a lot of it is down to personal preference and the needs of your individual project / business. Just have a play around with as many different ways as you can, and then take your favourite approach and build on it from there. Hope this all makes sense!

Cheers, Stu

On Fri, Sep 21, 2018, at 8:11 AM, Hovik Melkomian wrote:

Thanks for your time and descriptions. May I please ask you to check my repo again? I just pushed my changes including your PR and I still have the same issue. main.js is not generating so im getting 404 error.> But I clone your forked one and it was working .

BTW, dont you think using vue template for dotnet CLI (as we did for this sample project) is a bit overfilling? now its running MVC in order to get a MVC view and then inject vue.js?> I think if we create our front-end project with Vue CLI and then create a separate project for back-end (dotnet Core CLI ) as an API would be a better option.> I would appropriate your inputs.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub[1], or mute the thread[2].

Links:

  1. https://github.com/PacktPublishing/ASP.NET-Core-2-and-Vue.js/issues/1#issuecomment-423436834
  2. https://github.com/notifications/unsubscribe-auth/AQcxjDg04Gh-OgGe_5RCSF0wEOyerUTKks5udJENgaJpZM4WYrDv
melvik commented 6 years ago

Thanks Stu for your comments. Yes I've read about nuxtjs but haven't digged more since Im more comfortable doing my API in C#. Its in bucket list :+1: Now I'm trying to improve my Vue.js skills since Im totally in love with it and I believe it a better way to handle web applications. (my personal opinion) Need to learn more about it + webpack and ...

Looking forward to hear from you regarding my issue in repo. Im blocked to continue reading your book :wink:

sturatcliffe commented 6 years ago

I've just cloned your repo and it runs fine for me - I do get a 404 for the "vendor.css" file because it's referenced in the "Features/Shared/_Layout.cshtml" file, but as there are no CSS files in the vendor array of the webpack configuration it doesn't generate it. In a later chapter you'll add some CSS files to the vendor bundle which will then generate this missing CSS file so I'd leave it in.

Is this the 404 you are seeing? If so you should still see the rendered application in the browser! If not, try deleting entirely your node_modules, bin, obj and your yarn.lock files, then run yarn to install packages again and run the application to test again.

melvik commented 6 years ago

yes I noticed css errors but my problem is main.js it is not generating main.js file and as you see in my screenshot i get 404 for that https://ibb.co/kwhR2U

can you run the project and see the vue output? I removed folders you said and installed npm again. still I have the same error. I think my problem is lack of webpack and Im reading stuff... what is your recommended resource? I appropriate your time and replies.

melvik commented 6 years ago

in line 33 of webpack.config.vendor.js I see a reference to jQuery is it ok?

sturatcliffe commented 6 years ago

That's your problem - you need to remove it. If you look at the version of that file on github you'll see it doesn't exist: https://github.com/melvik/ASP.NET-Core-2-and-Vue.js/blob/master/webpack.config.vendor.js

But your local copy still has it which is why it works when I clone your repo but not for you.

melvik commented 6 years ago

you were right Stu. I have completely forgotten that part. Thanks for all the time and replies. I appreciate it indeed