Getting started on ASP.NET Core & React - episode 01

Getting started on ASP.NET Core & React - episode 01

Contents

  1. Episode 1 – Introduction (you are here)
  2. Episode 2 – Backend / Infrastructure
  3. Episode 3 – Frontend Setup
  4. Episode 4 – Data flow
  5. Episode 5 – Tests / Security
  6. Episode 6 – It’s your turn

The Most Important Thing (Seriously)

Introduction will be quite unusual, but don’t worry – at the end of this post everything will be clear.

We’d like to show you how to create a modern web application based on well-known, widely used technologies, but at the same time we’d like to ask you if you can forget for a moment about technologies.

From our perspective, the path you will follow during incoming posts will be the biggest value for you. You will see how projects are initiated and created from scratch. We will start with a blank page, and (hopefully) we will end with fully working application. Technologies? Yup, there will be ultra fast .NET Core and super fancy React, but in the future you might work with something else – that should not be a problem for you to jump from one technology to another.

Instead of focusing on technologies, you should be focused on patterns and practices.

We will teach you how to create basic environment set up, how to prepare and connect back-end with front-end, and how to pass data through all layers in our application. And of course we will build some core features for every single web application!

That’s why we won’t argue if React is better than Angular or if ASP.NET Core was the best possible option to choose – we will use technologies as a tools, which will help us reach our goal – nothing more, nothing less.

Goal

We’re sure that some of you, programmers, always wanted to start your own software house company or thought about being an entrepreneur focused on IT.

That’s often a hard nut to crack for the beginners. You need to figure our how the business plan will look like, how to organize your workday, how to get funds, how to manage projects, and so on… To run a successful company you need to handle many things, and what’s even harder – some of them don’t exactly depend on you.

Yes, I’m talking about the customers.

With only one or two small customers it’s quite easy to manage all the projects you’re working on, give them an insight about the situation in the project and to communicate with them. But when the scale goes up, things are getting more complicated. There are more projects, more questions and more issues. At the same you still have only 24h for all these things. So… what can be done to make our life easier?

We live in a 21st century – there’s an app for that! Or… there will be. Our own.

 

That’s right – we are going to build an application to manage our own software house (of course first of kind, we’ll be like Facebook 😉 ).

After brainstorming session we had a long list of features which this type of application requires. Then we removed 75% them. Why? To stay focused on the most important things from the developer’s perspective. First, you will see how to build MVP, later you can build and add any features you want.

You won’t regret joining us!

Rules

Now I’d like to show you what the future will look like.

Roadmap for this course can be divided into at least four parts. First part, so called ‚Introduction’, is currently in front of your eyes. The goal of this post is to help you understand what we are going to build, based on what tools, what language and – in general – idea behind it.

Later we’d like to focus on building a foundation – two posts will be dedicated to environment preparation (both back-end and front-end). At this point you will be able to see a working application represented by blank page served from a server.

Then there will be a series of posts about building features. At the beginning of each post we will define acceptance criteria to deliver so called ‚business increment’ – finite set of functionalities which should work correctly and which i.e. could be presented to our imaginary investors. Based on our experience, we’ve picked some core features which can be found in nearly every single web application. To be able to deliver them, we need to work in a ‚full-stack mode’ – our posts will contain mix of a back-end and front-end tips.

At the end there will be – as you can guess – a summary of our journey. It will be something similar to ‚tl;dr’, but we hope you will stay with us starting from now 😉

What’s super important – our project will be fully available on GitHub (you can check it out here). You’ll be able to fork it, modify, suggest pull requests and cooperate with us in your own repository. You should definitely try to break something, modify or add new features – it’s the best way to learn as much as possible.

Stack

There will be two main building blocks of our application – back-end based on ASP.NET Core, and front-end based on React.

ASP.NET Core

https://www.asp.net/core

We’ve been working with .NET from the beginning of our developer’s careers. We spent thousands of hours building web applications based on ASP.NET MVC and hundreds of hours creating solutions based .NET – mobile and desktop applications, plugins and extensions.

That’s why it was a natural step for us to use ASP.NET Core as a main part of our back-end.

The newest member of ASP.NET family is being described as a „lean and composable framework for building web and cloud applications”. Great performance, modularity, tools and a lot of other cool features convinced us to make this choice.

React

https://facebook.github.io/react/

React is well-known front-end library for building user interfaces. When we were thinking about our future UI we defined some specific set of requirements which needs to be fulfilled by our candidate to own the interface:

  • it has to be considered as one of the industry leaders
  • it has to be flexible enough to fit into server-side routing
  • it has to be ultra-fast, lightweight and developer-friendly

That’s why we believe React will be the best choice for our project.

There might be some questions why we’ve decided to go into this kind of „monolithic” architecture but for us it was clear – any kind of SPAs, microservices and other stuff used in much bigger project would be nothing else than overengineering. We’ll try to stick with simple and lean work environment as long as possible. Let’s not forget that this course is about building a working product in a reasonable amount of time, instead of building something using everything you can find on the Internet.

Language

It definitely wasn’t the easiest choice for us. We had a long debate whether we should use English or Polish language. As you can see here, we bet on English. Why?

Because we all live in a global community.

English is considered now – and probably still be in the future – as the universal language of software development. It’s something that connects programmers from many different countries and companies – by using English all barriers related to communicating, learning and sharing knowledge are gone.

In the vast majority of projects you will find English variable names, English method names, English class names and so on. There’s a chance that your managers will speak English, and there’s also a chance that English will be a primary language in your next project! You should definitely be ready to work under conditions like that (but at the same time you shouldn’t be worried – you don’t have to be a native speaker!).

It’s high time for all of us to level up! Let’s make this step together – we will do as much as needed to clear up any kind of confusion related to our posts, and of course we will be waiting for your feedback!

Are you ready?

Now we are waiting for your thoughts on this – leave us a comment below, or on our Facebook fanpage. We’d like to know if learning in this way is good for you, or you were thinking about something completely different. We will consider every single suggestion!

Next episodes are coming so stay tuned!

  • DD

    Can’t wait ! How many episodes will have this course and when it will appear?

    • Adrian Bystrek

      There will be about 8 episodes and we’ll be trying to publish new episode every two weeks. After each one there will be a lot of stuff to practice while waiting for the next one 🙂

  • Tomasz Sikora

    After playing around with react and angular and knockout I still haven’t found a suitable UI framework. Now I’m testing vue.js. Looks promising.

    • Przemek Smyrdek

      I guess you won’t find a ‚single suitable framework’ – it depends on the project / features size. I’ve been working on many projects where Angular was a perfect choice, but scale was much bigger than in our course. We’ve picked React because of it’s flexibility – we just want to extend sites served by server – something like Facebook is doing (Facebook isn’t SPA but still uses React).

      And of course we had a discussion about choosing Vue instead of React, but Facebook’s child won. At least for now 😉

  • Low Motion Disco

    Hello.
    React is the same as a ReactJS (http://reactjs.net)? And what happened with your Polish? 😀

    • Adrian Bystrek

      Hi, yes it’s the same. Rest of posts still will be in polish language, but technical ones in English. Why? We explained this here in this post, look at „Language” section 🙂

      • Low Motion Disco

        Okay. I’m looking forward next parts.
        Thanks!

  • Michał

    Kiedy cześć druga? Czego będziecie używać do asp.net na localhost? Bo chciałbym się trochę przygotować.

    • Adrian Bystrek

      Cześć druga w przyszłym tygodniu, potem będziemy się starali regularnie co dwa tygodnie przygotowywać i publikować kolejne odcinki. Na localhost będziemy pracować na pewno podczas developmentu. Poza tym, cześć druga to będzie stricte konfigurowanie środowiska i przygotowanie sobie całego backendu do pracy także spokojnie, przejdziemy przez to razem 🙂

  • LNG

    The article does not state explicitly if you will use the ASP.NET Core MVC framework. Maybe you could try NancyFx instead – https://github.com/NancyFx/Nancy

    • Przemek Smyrdek

      There’s just one ASP.NET Core framework – MVC and Web API work like modules which can be used on demand.

      We’re not going to use NancyFx now 🙂

  • Nice intro, I would like to run the application you created. Are you providing the complete source code somewhere? GitHub?

    • Adrian Bystrek

      Hi, thanks. Of course, the source code is available on GitHub (https://github.com/Lazys/Getting-started-on-ASP.NET-Core-React-software-house). We’ve provided the link to our repository in the summary of episode 2 🙂 I will also paste it somewhere here in the introduction to make it easier to find it.

      • oh, great! By the way I don’t know Polish (but my wife does). Any way to make disqus menus and so on be in my language?
        I got your site working for me. I previously had Node.js and SQL Server installed so I was able to make some shortcuts. I think all I did was:
        – Open a cmd window and cd to SoftwareHouseSoftwareHouse.Web
        npm install typescript @types/react @types/react-dom webpack –save-dev
        – Open SQL Server Manager and created database: „SoftwareHouse”
        – Update database to.
        „DefaultConnection”: „Server=localhost;Database=SoftwareHouse;Trusted_Connection=True;MultipleActiveResultSets=true”
        – Open „Package Manager Console” View -> Other Windows -> Package Manager Console
        Change default project to: SoftwareHouse.DataAccess
        Update-Database

        After this I was able to register my email and password in the application. Great!

        I might try to update the app so that it can register with VelocityDB as the back end instead of SQL Server (as I am the creater of VelocityDB)

        I hope you will continue adding more to this step by step guide as we are moving from using AngularJS to React. We may also be using Redux, what do you think of that?

        • Przemek Smyrdek

          Great to see that registration process works for you 🙂

          For disqus localized for you I’d check your account settings – maybe there will be something about language which should work across all pages based on this comment system.

          For React SPA consider using a tool called create-react-app – you can find it on GitHub – it’s the official CLI for creating single page apps based on React.

          About Redux – I’ve just finished project where I was integrating Angular and Redux and it works flawlessly. One think I would consider is the question whether you really need Redux – if you have many dependent components it’s probably a good idea, but with simple pages it would introduce relatively big overhead.

          Angular vs React – it’s up to you, two great tools 🙂

        • Adrian Bystrek

          Grats for VelocityDB project 🙂 Nice job 🙂