Let's say you are a front-end developer. Or you have just had to work more with the front end recently.
Or maybe you have built a small API with Python. But you have never touched the modern .NET family tech stack. This tutorial will guide you, step-by-step, in building a modern single page application (SPA) that will take advantage of Vue.js for the front-end and .NET Core (C#) for the back-end.
We will also see how to write some tests, both unit and integration, to cover the front and back end functionality (at least partially). If you want to skip the reading, here ?
is the GitHub repository with a detailed README ? We will build a web app where users can signup/login and just tell us how much they love pizzas, by pressing an "I love it" button.
There are no restrictions on the number of times each user can show us their appreciation. The only requirement is that only logged in users can vote.
- On the home page, along with the signup/login buttons, we will put a little bar-chart, displaying the top X users with the highest appreciation (on the X-axis) and the number of votes on the Y-axis.
- Let's start with the front end. It makes more sense to build the visible parts of our app first.
- We will build our front end with one of the most famous front-end libraries on the market: Vue.js.
- In order to install and configure our initial front end setup with Vue.js, we will use the Vue CLI.
- This is a standard command-line tool for developing Vue.js applications.
- To install it, use the following command. Note that all commands in this tutorial use NPM, which you need to have installed on your machine in order to follow along.
After successfully installing the Vue CLI, we should be able to start using it to install and configure Vue.js itself.
In library mode, there is also an 'index' which declares the components exposed as part of your library.
Let's do with the following process. Step 1: Create a new empty project directory and open it with the following commands:.
Step 2: While in the project root, run the following:. Then from the provided options, select the following:.
npm install -g vue-sfc-rollup
Manual select features. CSS-Preprocessors (SASS). Then select version 2.x from the next screen:. Next, select 'Use history mode for router?' and 'Sass/SCSS (with node-sass)', like so:.
Linter / Formatter. Unit Testing with Jest.
- E2E Testing with Cypress. After this last step, finish the installation process with the default options.
- Now we are ready to run the app by using the following commands from the root project folder:.
- After the app is running, you can see it in your browser on http://localhost:8080:. Before going on with building the actual components that our front-end app will have, let's install our back-end app via the .NET Core CLI.
- As mentioned above, we will use another command line tool, the .NET Core CLI, that gives us the ability to create and configure .NET applications.
If you don't have it already, you may use this link to download it and then install it.
Once you have the .NET Core CLI tool installed, go to your project's root directory and run the following command to create our back-end app.
Thus we will create a folder called backend and install a .NET web app inside it:. Before continuing with installing the next packages we will need, let's sort out our .gitignore file. This is a configuration file that tells Git what to ignore when committing changes to Git based repositories (the ones in GitHub).
Since we want to have one .gitignore file, it will include rules for two types of applications:. a Node.js based one, which is our Vue.js front end, and . a .NET (C#) one which is our back end. For this, we will use a tool called gitignore.io.
This tool will generate such files for us.
The advantage of using this tool is that it allows us to type in what our programming languages/platforms are, and it generates the .gitignore file for us.
Also, at the top of the generated file, it saves links for creation or subsequent editing, as shown below. Now we are good to go with the rest of the packages we need to install.
First we will install a package called SpaServices, which will allow us to have our app running via only one URL, and pointing to the .NET app.
From its side it will proxy requests to our front-end app. To install it, open your terminal, go to the backend folder of your project, and run the following:.
After this, we need to configure our back-end app with the SpaServices package in order to have the desired result. Every request will go to our .NET back-end app, and if the request is meant for the front end, it will proxy it.
To do this, open the Startup.cs file and update its content to be like this:. This is the final version of the Startup.cs file and that's why you probably noticed some more stuff in it.
We will get back to this a bit later in this tutorial. At this point, you should be able to run your back-end app. If you wish to do so, run the following commands from the root folder of your project:. As you may remember from the description at the beginning, our app should have a Sign up/Login option.
In order to fulfill this requirement, we will use a 3rd party service called Okta. We will install the necessary packages for using the Okta SDK on both the front end and back end of our app.
But before that, you need to create an account on their website and get access to their admin panel. From there you may create a new application. Here is how it looks on mine:. Now let's start with the package we need for our front end. From the root folder, run the following commands:. After this step, we are ready to amend our Vue.js app in order to take advantage of Okta SDK.
We will also install another package, called BootstrapVue, that provides a set of good looking and ready to use Vue.js components.
This will help us save development time and will also get us a good looking front end.
Running the build script results in 3 compiled files in the
distdirectory, one for each of the
unpkgproperties listed in your package.json file. With these files are generated, you're ready to go!
To install it, run the following from your frontend folder:. It's time to do some coding. We need to edit our router in order to apply what's coming from Okta authentication services.
You can see the full file in my GitHub repo, but here is the essential part that you need to configure with your own details (that you got when you registered on the Okta developer website):.
After we get our router sorted, we can finally do some changes to our app's home screen, which will actually be visible to our users. Open the App.vue file in your IDE and change its content as follows:.
By now your app might look something like this:. Note: Don't be confused by the text 'Pizza button and clicks counter here'. When building UIs, it's a good practice to leave such placeholders for components that are to be developed in the future.
In our case, this is where we will add the components responsible for the 'I love it' button and the counter later.
They will show the number of votes per user. By now, we have setup our front end to leverage the authentication service provided by Okta.