Getting started with cross platform ASP.NET Core, aspnet SpaServices, React and webpack

So i’m using visual studio and doing .net mvc web development with angular. I wanted to try out react and there is a new version of aspnet core out there so i thought what the hell i will give it i try. I will assume some knowledge of mvc, javascript and this is just a “how did i set it up” not a “i will learn you everything”.

One thing that i find confusing is the core versioning, Scott Hanselman said in the lastest standup that it isn’t really that hard if you tell it the right way. I think that MS haven’t done that really. There is Runtime, SDK and Tooling all of them in different versions. But i figured it out (just dowloaded the lastet ones and prayed) 🙂

Before i get started in how i did this you will need to know that all i wanted was to get something up and running ie bare minimum. I know there is templates in both dotnet cli and VS 2017 but i wanted to do it from scratch. The tools i will be using is Visual Studio code, dotnet cli and node with yarn as the package manager.

So let’s get started! Buckle up…

First download and install ASP.NET Core SDK 1.1
Install Node and install Yarn when you have these things installed you are ready to go.

For IDE i’m using Visual Studio Code as mentioned above, you can install that if you wan’t a really smooth experience with intellisense and so on but any text editor will do.

The first thing we need to do is create a new dotnet application, i will go with the default mvc template.  Open up a command prompt and execute the following commands:

After that you will have a folder with these files and folders: folder structure

Then in the same command prompt we can execute these commands to see if it runs:

If everything goes well we should be able to open http://localhost:5000 in your browser and see the default mvc biolerplate page.

Let’s go on and install some clientside packages via yarn (uses npm repository) first of init a package.json by running

We will be prompted with some questions i will for now just  press enter until the file package.json is generated. This is what we will end up with:

Now we are going to add the dependencies and devDependencies we require to create a super basic react application, a super neat feature of Visual Studio Code is that you will get intellisense and autocomplete! in package.json sweetness. This is what the finished package.json will look like.

The dependencies is just react and react-dom these are needed for react to even think about running 😉

The babel packages is for transpiling “newer” javascript to javascript that current browsers understand. webpack is for utilizing and doing the packaging of the javascript. We will later go into how that’s done with webpack.config.js

The aspnet-* packages is for running the SpaServices in development mode.

Save the file and go to the command prompt and execute

to install all the packages. we could have just run

but i prefer VS Code with autocomplete.

With ASP.NET Core back to csproj files again we are going to add the SpaServices package to the csproj file.

The run

Now we are ready to clean up in the folders and start writing some code.  Delete the following folders and files in wwwroot also remove the bower files in root.delete files and folders

Now we need to create these folders and files

Open the webpack.config.js and paste the following code:

Most of this is just copied from the JavaScriptServices templates and it’s pretty straight forward. What’s the entry of our app ./App/index.js where should webpack output the result ./wwwroot/js and the name will be app.bundle.js

The module part is where babel comes in, we tell webpack to look for *.js files but not in the node_modules folder. Use the babel-loader and the presets defined in options.

The plugins is not bare minimum but handy the first  one CommonChunksPlugin will look for parts that are included in more then 2 places and separate them to their own .js file.  And if there is a dev build we also generate Source maps for the js files generated.

Because we used the mvc template when running dotnet new we get some boilerplate code we don’t need. So change these files Views\Shared\_Layout.cshtml and Views\Home\Index.cshtml to this:

Lets add code to the react js files we created earlier

Now if we try to run

we will see this error in the console 404 bundle

this is because we have not packed the javascript files with webpack yet, run this (if we have wepack installed globally, if not read below)

For this to work we need to install webpack globally, i could not get this to work with yarn if you do it’s good to go but i needed to run

Then we can run dotnet run again. Tadaaaa it works we should now have this amazing react component showing in the browserreact running

Now for the hot module reloading we need to add a few lines of code in Startup.cs

Remember to add a using at the top

Now delete the files in wwwroot\js and run the project again. Remeber these js-files is only there because we build them with the webpack command and we do not wan’t that. We wan’t everything to run with the following command so let’s try

Gah! Darn why doesn’t it work? Remember the code we put in Startup.cs for WebpackDevMiddleware it’s in a if statement to only run if the Hosting environment is in development mode and what do we see when running dotnet run?

That’s right t’s running in production by default. It’s an easy fix we just need to set the env to development and this is how we do it in different command promps / terminals

Run the correct one for your environment and then run again

If we try to change the text in Main.js and save we will see in the browser that it tries to HOT Reload but it won’t work because of

We need to accept hot reloading by changing the index.js to this

Now save and do a full refresh of the browser then try to change the text in Main.js again

YIIIIHAAAA! We are live. Let’s just end here and i will get back to other stuff in a later post on how to expand on this.

Please let me know in the comments if there is better ways of doing these stuff i would appreciate it.

Code is up on github

Thanks for now

Sharing is caring!


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.