ASP.NET Core: CRUD With React.js and Entity Framework Core (with letting go of testing and security?)

Kate Pond
Kate Pond
Jun 17 · 4 min read

One day, in mid-May, 2019, while in a one on one with my mentor, I agreed to make a front-end interface POC (proof of concept) for an Azure SQL Server and Database(DB) at work. I wanted to use the same technologies that the people at work are using, and that meant using technologies I know very little about. I decided the best way to accomplish this was to follow some tutorials.

The first tutorial I decided to use was a tutorial found on DZone; ASP.NET Core: CRUD With React.js and Entity Framework Core.

On day one, I skipped the part of the tutorial that created the database and its tables since I already had access to the SQL DB in Azure. I instead continued straight to creating the Model-View-Controller (MVC) Web Application and its model using the Entity Framework. As it turns out, if you press all the right buttons, you get exactly what the tutorial wants you to get, a template MVC app. If you don’t press all the right buttons, you get an MVC template that has javascript files instead of typescript files. I spent a few days trying to figure out how to npm install Typescript into the project and trying to get the build error to go away [“Build: Cannot use JSX unless the ‘ — jsx’ flag is provided”]. After going through what felt like a few hundred search results I decided to just start again.

This time I pressed all the correct buttons and the lovely .ts ending showed up on the files in the solution (the MVC app). I was so proud of myself.

I then moved on to creating the model using the Entity Framework tools. That worked like a charm! I had a model in no time at all. There was one problem though, I now had a connection string with a user name and password in the code. The file created by Entity Framework had so helpfully pointed that fact out to me. Security is a big deal, so I didn’t want to just leave this connection string lying around. Luckily, Entity Framework tools had also created a build warning to specifically tell me how to start figuring out how to hide the sensitive connection string. Unfortunately, the tutorial didn’t cover security. So I had to look around for a tutorial to help me.

My biggest concern was that I didn’t want to commit the connection string to my git repository.

Following the docs, found by going to the link in the warning, I was able to hide the connection string password in the secrets.json and then use a connection string builder to construct the connection string on application startup.

Once I had my security problem “solved”, at least in my development environment, I started thinking about other things I wanted to do that weren’t included in the tutorial, including test-driven development. There was only one problem, I had no clue where to start! This was a new platform for me, and I had never set up a testing framework in a project like this, so I found this tutorial for help: Unit testing C# in .NET Core using dotnet test and xUnit

From there I set up the framework, and my first test to test my model. Unfortunately, I then spent what felt like over a week trying to figure out the weird error I was getting when I ran the test. As it was pointed out to me, the error I was running into was that I didn’t have Entity Framework included project for the tests. Oh, geez.

This was all turning into a bigger ordeal than I was hoping for, and I wasn’t getting to actually building the app. That’s when I decided that this was just a POC for goodness sake! I don’t need a cloud SQL Database and tests!

Instead, I decided I’d create a local SQL Database as suggested in the original tutorial. That meant creating a local SQL Server and a SQL Database. Who knew that that could be a challenge as well?!

I finally had the environment to start working on the React app itself!! Creating the environment was so interesting and the first/main tutorial I followed wasn’t bad. I just have a lot to learn about the environments that some of these technologies are set up on. In the end, I really wanted to show my team that I could build a POC React app, so I gave up on creating tests and connecting to the cloud. Those steps will be done when the app becomes a true app. 😊

If you made it all the way to the end of this post, congrats and thank you for reading! I hope the links in it have helped you or someone. Please feel free to ask me any questions about my experience setting this up. My hope is to now write about actually developing the functionality of this app, and the hiccups I’ve been running into along the way. Wish me luck!

Kate Pond

Written by

Kate Pond

I’m part developer, part interpretive park ranger, & 100% awesome! I’m always learning, and I love it!