Traditional web apps require full-page reloads for almost every click the user makes. SPAs, on the other hand, load a single HTML page and update the page contents dynamically as users interact with the application. This dynamism mimics the feel of desktop applications and results in better responsive interactions.

Before moving any further:

To follow along with what I'll discuss in this article, you should have some basic knowledge of React and how to set up a React project. If you already do, let's crack on.

What are React Router and React Router DOM?

React router is a powerful library that manages navigation and routing in React applications. The React Router DOM is used specifically for web applications and has few DOM-specific APIs.

As we dive into the world of React Router DOM, we'll explore its core concepts while demonstrating their implementation in a React application. Our focus will be on building a simple navigation system with links to different components, illustrating how to configure routes, handle route matching, and implement navigation.

By the end of this article, you'll have a solid understanding of how to use React Router DOM to create dynamic and seamless navigation experiences in your single-page applications.

How to Install React Router

As I explained above, React-router-DOM is used exclusively for integrating routing functionalities into web applications. So, in order to use it in your React app, you need to install the react-router-dom package by running this command in your React app terminal:

npm install react-router-dom

After successfully installing it, you can now start routing in your React project.

Core Concepts in React Router DOM

BrowserRouter

BrowserRouter a parent component that houses all the route components. All routes that you use in an application must be declared within the BrowserRouter. Most importantly, it stores the current location in the browser's address bar using URLs which comes in handy during navigation.

To use the BrowserRouter, you'll need to import it from the react-router-dom in your App.jsx file.

import { BrowserRouter } from "react-router-dom";

function App() {

  return (
    <BrowserRouter>

    </BrowserRouter>
  );
}

export default App;

The BrowserRouter has a basename attribute used to set base URL for all routes in an application. It's important if your app is hosted in a subdirectory on a domain.

<BrowserRouter basename="/shop">

</BrowserRouter>

Adding /shop as a basename will make sure that all route paths are relative to /shop.

Routes

This component is a direct replacement for switch which was used in the former versions of React Router. It also acts like a parent and renders the first matching child route, which ensures that the correct component is displayed based on the current URL.

To declare routes, import routes from react-router-dom and position it within the BrowserRouter component.

import { BrowserRouter, routes } from "react-router-dom";

function App() {

  return (
    <BrowserRouter>
        <Routes>

        </Routes>
    </BrowserRouter>
  );
}

export default App;

Route

Route a child component that consists of two attributes: path and element. A path can be any specified path name while the element attribute is the component that should be rendered. A route renders a specific component when the path specified matches a URL.

An application can have as many routes as it needs, and they must all be declared inside the Routes component. Assuming we have a <Home\> and <Pricing\> component, we will have to import the Route component and position it within the Routes.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Undeclared Routes

There is a way to handle routes that do not exist in your application, just like an Error 404 page. To do this, create another component bearing a Not Found message and the route added.

Set the path name to * and pass the component as the element.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Nested Routes

In some cases, routes can have children or sub-routes.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="categories" element={<Categories/>}>
                    <Route path="male" element={<Male/>}/>
                        <Route path="female" element={<Female/>}/>
                </Route>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

On navigating to the nested elements, the URL on the browser will be reading something like /categories/male and /categories/female.

Link

This acts like an anchor href attribute. It has a to attribute which specifies where the Link will take the user after a click. Usually, it is the path to a component's page that is passed to the to attribute.

Links are typically put in a Navbar component, so we will put two Links that point to the components path in our already declared Routes.

import { Link } from "react-router-dom";
export default function PageNav() {
  return (
  <>
        <Link to="/">Home</Link>
        <Link to="pricing">Pricing</Link>
  </>
  );
}

NB: If you are practicing along while reading this article, it is important to note that the PageNav component created here should be situated in your App.jsx and specifically just after the opening BrowserRouter tag before the Routes. This is to ensure the PageNav always stays at the top like a navigation menu despite routing through different components.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <PageNav/>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="categories" element={<Categories/>}>
                    <Route path="male" element={<Male/>}/>
                        <Route path="female" element={<Female/>}/>
                </Route>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

NavLink

NavLink performs the same function as Link and has a to attribute as well. But it's different as it has a class attribute. The class attributes are active, isPending, and isTransitioning. This makes it more versatile than Link and you can use it to conditionally add styles during user interactions.

import { NavLink } from "react-router-dom";
export default function PageNav() {
  return (
      <>
        <NavLink to="/">Home</NavLink>
        <NavLink to="pricing">Pricing</NavLink>
    </>
  );
  }

Outlet

Having child elements inside a parent route element means there is a layer of abstraction in rendering the child routes' UI. This is where the Outlet component comes into play. You add it to the parent route – in our example, it would be the Categories component.

import { NavLink, Outlet } from "react-router-dom";
export default function Categories() {
  return (
 <>
          <NavLink to="men">
            Men
          </NavLink>
          <NavLink to="women">
            Women
          </NavLink>
      <Outlet />
</>
  );
}

This allows for the rendering of the child routes UI in the nested route.

Image showing children nested routes in Categories route

useNavigate Hook

This hook returns a function that enables programmatic navigation between routes.

There are several ways to use the navigate function in your application. First, we need to import the useNavigate hook and initialize it as navigate.

import { useNavigate } from "react-router-dom";

export default function Homepage() {
  const navigate = useNavigate();

  return (
    <>
      <h1>This is the Homepage</h1>


    </>
  );
}

We can use navigate in the following ways in our application:

• Attaching it to a button via the onClick prop with the intended path to be navigated to, passed to the navigate function.

 <button onClick={() => navigate("/categories")}>Go to Categories</button>

• Using it with a Link component.

<Link to={navigate("/categories")}>Go to Categories</Link>

• Using a number instead of the component path in the navigate function. The number should specify the number of navigations backward in the history stack where you would like to go.

<Link to={navigate(-1)}>Go one step backwards</Link>

useParams Hook

Returns an object of the dynamic params gotten from the current URL matched by the Route's path. The parent routes pass all params to their child routes.

The example below shows an OrderPage component that will be rendered for every customer with their unique id. When the URL matches /customer/123, :id will be 123.

import { useParams } from "react-router-dom";

function App() {
  const {id} = useParams()
  return (
    <BrowserRouter>
        <Routes>
        <Route path="customer">
            <Route path=":id" element={<OrderPage/>}/>
           </Route>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Final Result

At this point, we've fully implemented React Router in our small navigation project. This is what it looks like in full flow:

For more detailed information and concepts about React router, you can visit the Official React Router documentation site.

Conclusion

In this article, we've explored the concepts and implementation of Client Side Routing (CSR) in a React web application. React Router, through its web-centric library React-Router-DOM, enables CSR, allowing apps to update the URL with a click of a link without making a server request for a new document.

This functionality enhances the user experience by providing faster navigation and a more seamless interaction within the application. By leveraging CSR, developers can build more efficient and responsive single-page applications (SPAs), ultimately improving performance and user satisfaction.

If you enjoyed reading this article, you could Buy me a Coffee.

Want to see more of these? Connect with me on LinkedIn.

See you on the next one!

Happy Coding!

If you're a web developer and work with an organization that uses Microsoft 365, or you build applications that you sell to customers, I've got great news for you: you can use your existing skills to build applications that integrate with Microsoft 365.

What's Microsoft 365?

Microsoft 365 is a set of applications, like Microsoft Teams, Outlook, Word, or SharePoint, that organizations use for work. Every day, millions of people use Microsoft 365 to chat, meet, send emails, create documents, and more.

But Microsoft 365 isn't just a set of apps. It's also a platform that enables developers, like yourself, to build applications. These apps can tap into data and insights stored on Microsoft 365 and bring them into people's workflows.

You Can Build your First Microsoft 365 App in Under 10 minutes

Following is a short tutorial that'll show you how to build a simple single-page app that integrates with Microsoft 365. The app will let users sign in with their Microsoft 365 account, and see their profile information.

Microsoft 365 application

It doesn't seem like much, but while building this simple app, you'll learn the basics of building Microsoft 365 apps.

What you'll need

• Node.js LTS (at the time of writing this article, it's 16.17.1)
• a Microsoft 365 developer tenant. You can get one for free from Microsoft 365 developer program, and it'll give you access to all Microsoft 365 APIs you need to build your apps, along with some demo data to get started
• 10 minutes of your time

Ready? Let's go!

Register your Application on the Microsoft Cloud

Create a folder for your application, where you'll store all app files. Open a terminal and change the working directory to that folder.

In the terminal, run the following command:

npx -p @pnp/cli-microsoft365 -- m365 login --authType browser

In your web browser, sign in with your newly created Microsoft 365 developer account:

Sign into your Microsoft 365 developer account

Next, back in the terminal, run the following command:

appId=$(npx -p @pnp/cli-microsoft365 -- m365 aad app add --name "Hello world" --multitenant --redirectUris "http://localhost,http://localhost/index.html" --platform spa --query "appId" -o text)

With these two commands, you've used the CLI for Microsoft 365 to sign in to Microsoft 365 and register your new app on the Microsoft Cloud.

Every app that integrates with Microsoft 365 must be registered and provide information such as the application's name and type (platform). For single-page apps, you also need to specify the application's URL, which is used to ensure that users are signing in to the right app.

Next, write the ID of the newly created app to a file that you'll reference in your app. In the terminal, run:

echo "const appId = '$appId';" > env.js

Create your App

Open your app folder in your code editor. Create a new file named index.html and paste the following code:

<html>
<head>
  // TODO #1: add libraries
</head>
<body>
  <h1>Hello Microsoft 365</h1>
  <div id="auth"></div>
  <pre></pre>
  <script>
    // TODO #2: add app code
  </script>
</body>
</html>

This code is a simple HTML page with two placeholders: one for the libraries that you'll use to build your app, and another for the app's code. It also contains a div where you'll show the login/logout button and a pre element where you'll show the user's profile information.

Add Libraries

Replace the TODO #1 comment with the following code:

  <script src="https://alcdn.msauth.net/browser/2.28.3/js/msal-browser.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-client-msalBrowserAuthProvider.js"></script>
  <script src="./env.js"></script>

To build this app you'll use a few libraries:

• MSAL.js which helps you handle signing users in with their Microsoft 365 account
• Microsoft Graph JavaScript SDK which simplifies calling Microsoft Graph – the API to access data and insights on Microsoft 365
• MSAL Browser Auth Provider which integrates MSAL.js with the Microsoft Graph JS SDK
• the previously created env.js file with the ID of your app

Using these libraries will help you build your app faster, and you won't have to worry about the details of how to sign users in, get an access token, or properly handle API errors.

Sign Users In with their Microsoft 365 Account

Replace the TODO #2 comment with the following code:

    (() => {
      // TODO #3: create MSAL client

      // TODO #5: handle login/logout

      // TODO #6: create Microsoft Graph client

      // TODO #7: get Microsoft 365 user profile

      function render() {
        // TODO #4: render UI
      }

      render();
    })();

This code is an immediately invoked function expression (IIFE) that encapsulates the app's code and runs when the app loads. It also contains several placeholders for the code that you'll write in the next steps.

Replace the TODO #3 comment with the following code:

      const msalConfig = {
        auth: {
          clientId: appId
        }
      };
      const msalClient = new msal.PublicClientApplication(msalConfig);

In this fragment, you're creating a new configuration object for the MSAL.js library which includes a reference to the ID of the app you created earlier.

Next, you pass this object to the PublicClientApplication constructor to create a new instance of the MSAL client, which you'll use to sign users into your app with their Microsoft 365 account.

Right now, the app shows an empty page. Let's change that by replacing the TODO #4 comment with the following code:

        msalClient
          .handleRedirectPromise()
          .then(response => {
            const accounts = msalClient.getAllAccounts();

            if (accounts.length === 0) {
              document.querySelector('#auth').innerHTML = '<button>Login</button>';
              document.querySelector('#auth button').addEventListener('click', login);
              document.querySelector('pre').innerHTML = '';
            }
            else {
              document.querySelector('#auth').innerHTML = '<button>Logout</button>';
              document.querySelector('#auth button').addEventListener('click', logout);
              // TODO #8: show user profile
            }
          });

When signing users in with their Microsoft 365 account, you'll redirect them to the Microsoft 365 sign-in page. When they sign in, they'll be redirected back to your app.

The handleRedirectPromise function will handle processing the information that Microsoft 365 sends to your app. When users come to your app and haven't signed in yet, the handleRedirectPromise function will resolve with a null response.

After handling the redirect, you check using MSAL if there are any users signed in to your app. If there are none (accounts.length === 0 ), you show the login button. If there are users signed in, you show the logout button. Later, you'll add the code to show the user's profile information.

Both, the login and the logout button are missing their click handlers, so let's add them by replacing TODO #5 with the following code:

      function login(e) {
        e.preventDefault();
        msalClient.loginRedirect();
      }

      function logout(e) {
        e.preventDefault();
        msalClient.logoutRedirect();
      }

In both cases, you're using MSAL to sign users in and out by redirecting them to the Microsoft 365 login/logout page.

At this stage, your app should let you sign in and out using your Microsoft 365 account. To verify that everything is working as intended, save your changes, and in the terminal run:

npx lite-server

In your web browser, navigate to http://localhost:3000 and sign in to your app. You should see the following screen:

After signing into your app

When you click the login button, you will be asked to sign in with your Microsoft 365 account. Then, when you click the logout button, you will be signed out from Microsoft 365 and the app.

This concludes the first part of building the app, and you're ready to start retrieving data from Microsoft 365 using Microsoft Graph.

Show Microsoft 365 User Profile

Now that your app supports signing in and out with Microsoft 365 accounts, the next step is to add the code to retrieve the user's profile information from Microsoft 365.

Replace the TODO #6 comment with the following code:

      function getGraphClient(account) {
        const authProvider = new MSGraphAuthCodeMSALBrowserAuthProvider.AuthCodeMSALBrowserAuthenticationProvider(msalClient, {
          account,
          scopes: ['user.read'],
          interactionType: msal.InteractionType.Redirect,
        });

        return MicrosoftGraph.Client.initWithMiddleware({ authProvider });
      }

This function takes as an argument the Microsoft 365 account that has been used to sign in to the app and uses it to create a Microsoft Graph client that you'll use to call Microsoft Graph APIs and get data from Microsoft 365.

Next, let's replace the TODO #7 comment with the following code:

      function loadUserProfile(graphClient) {
        graphClient
          .api('/me')
          .get()
          .then(res => {
            document.querySelector('pre').innerHTML = JSON.stringify(res, null, 2);
          });
      }

This function takes as an argument an instance of the Microsoft Graph client as returned by the Microsoft Graph JavaScript SDK and uses it to call the Microsoft Graph API.

In this case, you're calling the /me Microsoft Graph API which returns profile information for the currently signed-in user. The retrieved data is then displayed in the pre element on the page.

The final piece is to tie it all together and call both functions after the user signs in to the app. Replace the TODO #8 comment with the following code:

              const graphClient = getGraphClient(accounts[0]);
              loadUserProfile(graphClient);

That's it! When you save your changes and go back to the browser, you'll see it automatically refreshed in the background, and you're prompted to grant the app access to your profile information.

Setting permissions on the app

After your grant access, by clicking the Accept button, you'll see the profile information displayed in the pre element on the page.

Profile information

Congratulations! You've just built your first app connected to Microsoft 365.

This is just the beginning

You've just built your first app on Microsoft 365: a single-page app connected to Microsoft 365 that shows the Microsoft 365 profile of the current user. This app is a simple example to show you how to get started building apps on Microsoft 365.

There's a lot more data and insights stored in Microsoft 365 that your apps can access, and there are many types of apps that you can build. The best part is that you can use the same techniques that you've learned in the last 10 minutes to build them.

You've just built a Microsoft 365 app using JavaScript, but you can build apps on Microsoft 365 using any programming language. One thing that all Microsoft 365 apps have got in common is that they bring in data and insights from Microsoft 365 helping people work together.

Curious to learn more? See what other developers and Microsoft partners are building on Microsoft 365. And if you want to learn further, check out the Microsoft Graph Fundamentals learning path. And please, don't hesitate to reach out if you have any questions.

Why Metadata Matters

Metadata is an integral part of any modern web app, because it's inherently tethered to search engine optimization (SEO).

Search engines and their respective results page (SERPS) rely on metadata to properly index and display relative information for each site.

Also, meta tags are relied upon to properly display content from your site on a given social media platform, such as articles or items for sale.

For this reason, it's crucial to understand how metadata is configured in a modern web app.

The single page application (SPA) is a modern web app implementation that is incredibly popular. Most frameworks today utilize it in some way. Configuring metadata in today’s most popular SPA frameworks will be the focus of this tutorial.

The Single Page Application and Metadata

The nature of SPAs make configuring metadata a less straightforward process than classic multiple page applications. I'm going to try to clarify this topic by describing the following key concepts:

1. The structure of an SPA.
2. The problem with modifying metadata in an SPA.
3. Available metadata solutions using what are probably the three most popular SPA frameworks: React, Svelte, and Vue.

You should have a basic understanding of HTML, metadata, and one of the three SPA frameworks to understand the concepts we’ll be going over. But, I’ll be keeping things beginner friendly, so don’t worry!

How Single Page Applications Work

Before diving in, you need a firm grasp of what constitutes an SPA.

As the name implies, a single page application literally consists of a single HTML page sent down from the server. This page is just an empty HTML shell, and will look something like this:

<!DOCTYPE html>
    <html>
        <head>
        <title>Home | Demystifying SPA Metadata</title>
        <meta name="description" content="How to configure popular SPA             frameworks to maintain quality site metadata."/>
        <link rel="stylesheet" href="./stylesheet.css" type="text/css"             />
        </head>
        <body>
            <script src="/bundle.min.js" type="text/javascript">                    </script>
        </body>
    </html>

You might be wondering how an entire website is derived from this empty HTML shell.

This is possible because along with the HTML page will be extensive client-side JavaScript code that generates the content for each page. This code is included in the page via the

In this tutorial, you will learn how to build a single page application. I'll take you through the process step by step, using cutting edge technologies like Laravel 9, Jetstream, Vuejs, Inertiajs, MySQL, Tailwind CSS, and Docker.

Let's get started.

What you need to follow this guide:

To follow along you will need:

• a computer
• to know how to install software
• a basic understanding of HTML, CSS, JavaScript, and PHP
• knowledge of at least one JavaScript framework and an understanding of the MVC design pattern.

This guide is organized into 10 chapters and is based off a live coding series that I record. The live coding series is completely unscripted, so there will be bugs and gotchas there that you won't find in this guide.

You can find the complete playlist at the end of this article.

Everything here should just work, but if it doesn't feel free to ask for help by joining my community on Slack. There you can share code snippets and chat with me directly.

Table of Contents

• What Tech Are We Using?
• How to Setup Your Machine
• How to build the app with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3
• How to Refactor the Admin Dashboard and Create New Admin Pages
• How to Submit Forms with Files
• How to Add the Form to the Component
• How to Store Data
• How to Update Operations
• How to Delete a Resourse
• Wrap up and what's next
• Conclusion

What Tech Are We Using?

First, let's go over the different tools we'll be using in this project.

Docker

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.

To simplify this concept, Docker lets you package applications and dependencies in a container.

A containerized application allows you to have a flexible development environment so that you can run different applications without worrying about dependencies, their requirements, and conflicts between different versions. You can easily run applications that, for instance, require two different versions of PHP and MySQL.

Each team member can quickly reproduce the same environment of your application by simply running the same container's configuration.

If you want to learn more about Docker, its Documentation is a great place to start.

Here's a Handbook on Docker essentials, as well, so you can practice your skills.

Mysql

MySQL is an open-source relational database management system. You can use it to organize data into one or more tables with data that may be related to each other.

We need to store data somewhere and here is where MySQL comes into play.

Here are the Docs if you want to read up more. Here's a full free course on MySQL if you want to dive deeper.

Laravel

Laravel is a free, open-source PHP web framework that helps you develop web applications following the model–view–controller architectural pattern.

Laravel is an amazing PHP framework that you can use to create bespoke web applications.

Here's the Laravel Documentation for more info, and here's a full project-based course to help you learn Laravel.

Laravel Sail

Laravel Sail is a lightweight command-line interface for interacting with Laravel's default Docker development environment.

Sail provides a great starting point for building a Laravel application using PHP, MySQL, and Redis without requiring prior Docker experience.

Usually, creating a development environment to build such applications means you have to install software, languages, and frameworks on your local machine – and that is time-consuming. Thanks to Docker and Laravel Sail we will be up and running in no time!

Laravel Sail is supported on macOS, Linux, and Windows via WSL2.

Here's the Documentation if you want to read up on it.

Laravel Jetstream

When building web applications, you likely want to let users register and log in to use your app. That is why we will use Jetstream.

Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application.

It uses Laravel Fortify to implement all the back end authentication logic. Here are the Docs.

Vuejs

Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications.

Vue is a fantastic framework that you can use as a stand-alone to build single-page applications, but you can also use it with Laravel to build something amazing.

Here's the Vue Documentation if you want to read up. And here's a great Vue course to get you started.

Inertia JS

Inertia is the glue between Laravel and Vuejs that we will use to build modern single-page applications using classic server-side routing.

You can learn more about it in the Documentation here.

Tailwind

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that you can use to build any design, directly in your markup

We'll use it in this project to build our design. Here's a quick guide to get you up and running if you aren't familiar with Tailwind.

How to Set Up Your Machine

To follow along with my live coding (and this tutorial), you will need to install Docker desktop on your machine. If you are using Windows, you will also need to enable WSL in your system settings.

Visit the Docker getting started page to install Docker Desktop.

If you are on Windows, enable WSL2 by following the steps here.

If you have any trouble, feel free to reach out or join my community on Slack to get help.

Laravel Installation with Sail

If you have successfully installed Docker Desktop on your machine, we can open the terminal and install Laravel 9.

Open a terminal window and browse to a folder where you want to keep your project. Then run the command below to download the latest Laravel files. The command will put all files inside a folder called my-example-app, which you can tweak as you like.

# Download laravel
curl -s "https://laravel.build/my-example-app" | bash
# Enter the laravel folder
cd my-example-app

Deploy Laravel on Docker using the sail up command

With Docker Desktop up and running, the next step is to start Laravel sail to build all the containers required to run our application locally.

Run the following command from the folder where all Laravel files have been downloaded:

vendor/bin/sail up

It will take a minute. Then visit http://localhost and you should see your Laravel application.

If you run sail up and you get the following error, it is likely that you need to update Docker Desktop:

ERROR: Service 'laravel.test' failed to build:

How to Build the App with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3

In this section, we will define a basic roadmap, install Laravel 9 with Laravel Sail, Run sail, and build the containers.

I will also take you on a tour of Laravel Sail and the sail commands.

Then we will install Jetstream and scaffold Vue and Inertia files and have a look at the files and available features.

Next, we will populate our database and add the front end provided by Jetstream to register an account and log into a fresh Laravel application.

Finally, we will have a look at the Jetstream dashboard, and the Inertia/Vue Components and then start playing around.

Along the way, we'll disable the registration, enable the Jetstream user profile picture feature, and then add our first Inertia page where we'll render some data taken from the database.

Here's the live coding video if you want to follow along that way:

And if you prefer following along in this written tutorial, here are all the steps.

Just a reminder – you should have Laravel installed with Sail and have Docker set up on your machine. You can follow the steps above to do so if you haven't already.

Laravel Sail Overview – Sail Commands

With Laravel Sail installed, our usual Laravel commands have sligtly changed.

For instance, instead of running the Laravel artisan command using PHP like php artisan, we now have to use Sail, like so: sail artisan.

The sail artisan command will return a list of all available Laravel commands.

Usually, when we work with Laravel, we also have to run the npm and composer commands.

Again, we need to prefix our commands with sail to make them run inside the container.

Below you'll find a list of some commands you will likely have to run:

# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require <packageName> # it was: composer require <packageName>
# Use npm commands
sail npm run dev # it was: npm run dev

You can read more in the Sail documentation.

Install Jetstream and Scaffold Vue and Inertia

Let's now install the Laravel Jetstream authentication package and use the Inertia scaffolding with Vue3.

cd my-example-app
sail composer require laravel/jetstream

Remember to prefix the composer command with sail.

The command above has added a new command to Laravel. Now we need to run it to install all the Jetstream components:

sail artisan jetstream:install inertia

Next we need to compile all static assets with npm:

sail npm install
sail npm run dev

Before we can actually see our application, we will need to run the database migrations so that the session table, required by Jetstream, is present.

sail artisan migrate

Done! Jetstream is now installed in our application. If you visit http://localhost in your browser you should see the Laravel application with two links at the top to register and log in.

Populate the Database and Create a User Account

Before creating a new user, let's have a quick look at the database configuration that Laravel Sail has created for us in the .env file.

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password

As you can see, Laravel Sail configures everything we need to access the database container that is running on Docker. The DB_DATABASE is the name of the database and it is the same as the project folder. This is why in the previous step we were able to run the migrate command without issues.

Since we already migrated all database tables, we can now use the Laravel built-in user factory to create a new user then use its details to log in our user dashboard.

Let's open artisan tinker to interact with our application.

sail artisan tinker

The command above will open a command line interface that we can use to interact with our application. Let's create a new user.

User::factory()->create()

The command above will create a new user and save its data in our database. Then it will render the user data onto the screen. Make sure to copy the user email so we can use it later to log in. Then exit by typing exit;.

The default password for every user created with a factory is password.

Let's visit the login page and access our application dashboard.

Jetstream Dashboard

After login you are redirected to the Jetstream dashboard, which looks amazing by default. We can customize it as we like, but it is just a starting point.

Jetstream/Vue Components and Inertia Overview

The first thing you may notice after installing Jetstram is that there are a number of Vue components registered in our application. Not only that, also Inertia brings in Vue components.

To use Inertia, we need to get familiar with it when defining routes.

When we installed Jetstream, it created inside the resources/js directory a number of subfolders where all our Vue components live. There are not just simple components but also Pages components rendered by inertia as our Views.

The Jetstream inertia scaffolding created:

• resources/js/Jetstream Here we have 27 components used by Jetstream, but we can use them in our application too if we want.
• resources/js/Layouts In this folder there is the layout component used by inertia to render the dashboard page
• resources/js/Pages This is where we will place all our Pages (views) components. You will find the Dashboard page as well as the Laravel Welcome page components here.

The power of Inertia mostly comes from how it connects Vue and Laravel, letting us pass data (Database Models and more) as props to our Vue Pages components.

When you open the routes/web.php file you will notice that we no longer return a view but instead we use Inertia to render a Page component.

Let's examine the / homepage route that renders the Welcome component.

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

It looks like our usual Route definition, exept that in the closure we are returning an \Inertia\Response by calling the render method of the Inertia class Inertia::render().

This method accepts two parameters. The first is a component name. Here we passed the Welcome Page component, while the second parameter is an associative array that will turn into a list of props to pass to the component. Here is where the magic happens.

Looking inside the Welcome component, you will notice that in its script section, we simply define four props matching with the keys of our associative array. Then inertia will do the rest.

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },
        // 👇 Define the props 
        props: {
            canLogin: Boolean, 
            canRegister: Boolean,
            laravelVersion: String,
            phpVersion: String,
        }
    })
</script>

We can then just call the props inside the template. If you look at the template section you will notice that laravelVersion and phpVersion are referenced in the code as you normally would do with props in Vuejs.

<div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
  Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
</div>

The dashboard component is a little different. In fact it uses the Layout defined under Layouts/AppLayout.vue and uses the Welcome component to render the Dashboard page content, which is the same as the laravel Welcome page.

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <welcome /> 
                </div>
            </div>
        </div>
    </app-layout>
</template>

Inside the layout component you will notice the two inertia components Head and Link.

We can use the Head component to add head elements to our page, like meta tags, page title, and so on. The Link component is a wrapper aroud a standard anchor tag that incercepts click events and prevents full page reload as you can read in the Inertia documentation.

Link Component Head Component

Disable the Registration Feature

If you are following along, the next step I'll take is to disable one on the features Jetstream provides – register an account.

To do that, we can navigate to config/fortify.php and comment out line 135 Features::registration() from the features array.

'features' => [
        //Features::registration(),
        Features::resetPasswords(),
        // Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirmPassword' => true,
        ]),
    ],

If we visit the welcome page we will notice that the register link is gone. Also, the route is no longer listed when we run sail artisan route:list.

Enable Jetstream User Profile Picture

Now let's try to enable the Jetstream feature called ProfilePhotos. As you can guess, this will allow the user to add a profile picture.

To do that we need to visit config/jetstream.php and uncomment line 59 Features::profilePhoto.

    'features' => [
        // Features::termsAndPrivacyPolicy(),
        Features::profilePhotos(), // 👈
        // Features::api(),
        // Features::teams(['invitations' => true]),
        Features::accountDeletion(),
    ],

If you log in you will see that in the user profile, a new section is available to upload a profile picture.

But before doing anything else we need to run sail artisan storage:link so that Laravel creates a symlink to the storage/app/public folder where we will save all user profile images.

Now try to visit the user profile and update the profile picture. If you get a 404 on the image this is because by default Laravel sail assumes we are using Laravel valet and sets the app URL like so APP_URL=http://my-example-app.test in the .env file. Let's change it and use localhost instead.

APP_URL=http://localhost

Now we should be good to go and be able to see and change our profile image!🥳

How to Add our First Inertia Page and Render Records from the DB

Since we are rendering Vue components instead of blade views, it is wise to start sail npm run watch to watch and recompile our Vue components as we create or edit them. Next let's add a new Photos page.

I will start by creating a new Route inside web.php:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos');
});

In the code above I defined a new GET route and then rendered a component that I will place inside the resources/js/Pages/Guest and call Photos. Let's create it.

Create a Guest folder:

cd resources/js/Pages
mkdir Guest
cd Guest
touch Photos.vue

Then let's define a basic component:

<template>
  <h1>Photos Page</h1>
</template>

If we visit http://localhost/photos/ we will see our new page, cool! Let's copy over the page structure from the Welcome page so that we get the login and dashboard links as well.

The component will change to this:

<template>
    <Head title="Phots" />

    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
            <Link v-if="$page.props.user" :href="route('admin.dashboard')" class="text-sm text-gray-700 underline">
                Dashboard
            </Link>

            <template v-else>
                <Link :href="route('login')" class="text-sm text-gray-700 underline">
                    Log in
                </Link>

                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
                    Register
                </Link>
            </template>
        </div>

        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <h1>Photos</h1>

        </div>
    </div>
</template>

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },

        props: {
            canLogin: Boolean,
            canRegister: Boolean,

        }
    })
</script>

The next step is to render a bunch of data onto this new page. For that we will build a Model and add some records to the database.

saild artisan make:model Photo -mfcr

This command creates a Model called Photo, plus a database migration table class, a factory, and a resource controller.

Now let's define the database table inside the migration we just creted. Visit the database/migrations folder and you should see a file with a name similar to this: 2022_02_13_215119_create_photos_table (yours will be sligly different).

Inside the migration file we can define a basic table like the following:

 public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('path');
            $table->text('description');
            $table->timestamps();
        });
    }

For our table we defined just two new columns, path and description, plus the id, created_at and updated_at that will be created by the $table->id() and by the $table->timestamps() methods.

After the migration we will define a seeder and then run the migrations and seed the database.

At the top of the database/seeders/PhotoSeeder.php file we will import our Model and Faker:

use App\Models\Photo;
use Faker\Generator as Faker;

Next we will implement the run method using a for loop to create 10 records in the database.

    public function run(Faker $faker)
    {
        for ($i = 0; $i < 10; $i++) {
            $photo = new Photo();
            $photo->path = $faker->imageUrl();
            $photo->description = $faker->paragraphs(2, true);
            $photo->save();
        }
    }

We are ready to run the migrations and seed the database.

sail artisan migrate
sail artisan db:seed --class PhotoSeeder

We are now ready to show the data on the Guest/Photos page component. First update the route and pass a collection of Photos as props to the rendered component:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos', [
        'photos' => Photo::all(), ## 👈 Pass a collection of photos, the key will become our prop in the component
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
    ]);
});

Second, pass the prop to the props in the script section of the Guest/Photos component:

props: {
    canLogin: Boolean,
    canRegister: Boolean,
    photos: Array // 👈 Here
}

Finally loop over the array and render all photos in the template section, just under the h1:

<section class="photos">
    <div v-for="photo in photos" :key="photo.id" class="card" >
        <img :src="photo.path" alt="">
    </div>
</section>

Done! if you visit the /photos page you should see ten photos. 🥳

How to Refactor the Admin Dashboard and Create New Admin Pages

In this chapter we will Re-route the Jetstream dashboard and make a route group for all admin pages.

Then we will see how to add a new link to the dashboard and add a new admin page.

Finally we will take a collection of data from the db and render them in a basic table. The default table isn't cool enough, so for those reading this article, I decided to add a Tailwind table component.

Re-route the Jetstream Dashboard

If we look at the config/fortify.php file we can see that around line 64 there is a key called home. It is calling the Home constant of the Route service provider.

This means that we can tweek the constant and redirect the authenticated user to a different route.

Lets go through it step-by-step:

• update the HOME Constant
• make a route group and redirect logged in users to admin/ instead of '/dashboard'

Our application will have only a single user, so once they're logged in it is clearly the site admin – so makes sense to redirect to an admin URI.

Change the HOME constant in app/Providers/RouteServiceProvider.php around line 20 to match the following:

public const HOME = '/admin';

How to Add an Admin Pages Route Group

Next let's update our route inside web.php. We will change the route registered by Jetstream from this:

Route::middleware(['auth:sanctum', 'verified'])->get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

To this:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // other admin routes here
});

The route above is a route group that uses the auth:sanctum middleware for all routes within the group, a prefix of admin, and adds a admin suffix to each route name.

The end result is that we will be able to refer to the dashboard route by name, which now will be admin.dashboard. When we log in, we will be redirected to the admin route. Our dashboard route will respond since it's URI is just / but the goup prefix will prefix every route in the group and make their URI start with admin.

If you now run sail artisan route:list you will notice that the dashboard route has changed as we expected.

Before moving to the next step we need to update both the /layouts/AppLayout.vue and /Pages/Welcome.vue components.

Do you remeber that the dashboard route name is now admin.dashboard and not just dashboard?

Let's inspect the two components and update every reference of route('dahsboard') to this:

route('admin.dahsboard')

and also every reference of route().current('dashboard') to this:

route().current('admin.dashboard')

After all the changes, make sure to recompile the Vue components and watch changes by running sail npm run watch. Then visit the home page to check if everything is working.

How to Add a New Link to the Dashboard

Now, to add a new admin page where we can list all photos stored in the database, we need to add a new route to the group we created earlier. Let's hit the web.php file and make our changes.

In the Route group we will add a new route:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // 👇 other admin routes here 👇

    Route::get('/photos', function () {
        return inertia('Admin/Photos');
    })->name('photos'); // This will respond to requests for admin/photos and have a name of admin.photos

});

In the new route above we used the inertia() helper function that does the same exact thing – returns an Inertia/Response and renders our Page component. We placed the component under an Admin folder inside Pages and we will call it Photos.vue.

Before we create the component, let's add a new link to the dashboard that points to our new route.

Inside AppLayout.vue, find the Navigation Links comment and copy/paste the jet-nav-link component that is actually displaing a link to the dashboard and make it point to our new route.

You will end up having something like this:

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <jet-nav-link :href="route('admin.dashboard')" :active="route().current('admin.dashboard')">
        Dashboard
    </jet-nav-link>
    <!-- 👇 here it is our new link -->
      <jet-nav-link :href="route('admin.photos')" :active="route().current('admin.photos')">
        Photos
    </jet-nav-link>
</div>

Our link above uses route('admin.photos') to point to the correct route in the admin group.

If you visit localhost/dashboard and open the inspector, you should see an error:

Error: Cannot find module `./Photos.vue`

It is fine – we haven't created the Photos page component yet. So let's do it now!

How to Add a New Admin Page Component

Make a file named Photos.vue inside the Pages/Admin folder. Below are the bash commands to create the folder and the file via terminal, but you can do the same using your IDE's graphical interface.

cd resources/js/Pages
mkdir Admin
touch Admin/Photos.vue

To make this new page look like the Dashboard page, we will copy over its content. You should end up having something like this:

<template>
  <app-layout title="Dashboard"> <!-- 👈 if you want you can update the page title -->
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
    </template>

    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <!-- 👇  All photos for the Admin page down here -->
          <h1 class="text-2xl">Photos</h1>

        </div>
      </div>
    </div>
  </app-layout>
</template>

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
});
</script>

I removed a few pieces from the Dashboard template so make sure to double check the code above. The welcome component was removed from the template as it is not required in this page, and also its reference in the script section. The rest is identical.

Feel free to update the page title referenced as prop on the <app-layout title="Dashboard">.

Now when you visit localhost/admin you can click on the Photos menu item and see our Photos page component content. It's not much for now, just an h1.

How to Render Records in the Admin Page as a Table

Now it's time to render the data onto a table. To make things work let's first add our markup and fake that we already have access to as an array of objects and loop over them inside our table. Than we will figure out how to make things work for real.

 <table class="table-auto w-full text-left">
  <thead>
    <tr>
      <th>ID</th>
      <th>Photo</th>
      <th>Desciption</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="photo in photos">
      <td>{{ photo.id }}</td>
      <td><img width="60" :src="photo.path" alt="" /></td>
      <td>{{photo.description}}</td>
      <td>View - Edit - Delete</td>

    </tr>
  </tbody>
</table>

Ok, since we assumed that our component has access to a list of Photos, let's pass a new prop to the component from the Route.

Update the route in web.php and pass to the inertia() function a second argument that will be an associative array. It will have its keys passed as props to the Vue Page component.

In it we will call Photo::all() to have a collection to assign to a photos key, but you can use other eloquent methods if you want to paginate the results, for example.

Route::get('/photos', function () {
    return inertia('Admin/Photos', [
        'photos' => Photo::all()
    ]);
})->name('photos');

To connect the prop to our Page component we need to define the prop also inside the component.

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
  /* 👇 Pass the photos array as a props 👇 */
  props: {
    photos: Array,
  },
});
</script>

Extra: How to use a Tailwind table component

Tailwind is a CSS framework similar to Bootstrap. There are a number of free to use components that we can grab from the documentation, tweak, and use.

This table component is free and looks nice:https://tailwindui.com/components/application-ui/lists/tables.

We can tweek the Photos page template and use the Tailwind table component to get a nice looking table like so:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                              <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                              View - Edit - Delete
                                              </a>
                                          </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

How to Submit Forms with Files

For the next section we will look into how to submit a form so that we can add a new photo to the database.

• Add a create button
• Add a create route
• Define the PhotosCreate component
• Add a form
• Validate data
• Show validation errors
• Save the file to the filesystem
• Save the model

How to Create a New Photo

Add a link that points to a create route:

<a class="px-4 bg-sky-900 text-white rounded-md" :href="route('admin.photos.create')">Create</a>

Create the route within the admin group:

Route::get('/photos/create', function () {
    return inertia('Admin/PhotosCreate');
})->name('photos.create');

Let's add also the route that will handle the form submission for later:

Route::post('/photos', function () {
    dd('I will handle the form submission')   
})->name('photos.store');

Create the Admin/PhotosCreate.vue component:

    <template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <h1 class="text-2xl">Add a new Photo</h1>
                <!-- 👇 Photo creation form goes here -->

            </div>
        </div>
    </app-layout>
</template>


<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },

});
</script>

How to Add the Form to the Component

The next step is to add the form to the page and figure out how to submit it.

If you hit the Inertia documentation you will find out that there is a useForm class that we can use to simplify the process.

First, import the module inside the script tag of the Admin/PhotosCreate.vue component:

import { useForm } from '@inertiajs/inertia-vue3';

Next we can use it in the setup function (Vue 3 composition API):

setup () {
    const form = useForm({
      path: null,
      description: null,
    })

    return { form }
  }

In the code above we defined the function called setup() then a constant called form to have the useForm() class assigned to it.

Inside its parentheses we defined two properties, path and description which are the column names of our photos model.

Finally we returned the form variable for the setup function. This is to make the variable available inside our template.

Next we can add the form markup:

<form @submit.prevent="form.post(route('admin.photos.store'))">

<div>
    <label for="description" class="block text-sm font-medium text-gray-700"> Description </label>
    <div class="mt-1">
        <textarea id="description" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="lorem ipsum" v-model="form.description"/>
    </div>
    <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
        <div class="text-red-500" v-if="form.errors.description">{{form.errors.description}}</div>
</div>
<div>
    <label class="block text-sm font-medium text-gray-700"> Photo </label>
    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
    <div class="space-y-1 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div class="flex text-sm text-gray-600">
        <label for="path" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
            <span>Upload a file</span>
            <input id="path" name="path" type="file" class="sr-only" @input="form.path = $event.target.files[0]" />
        </label>
        <p class="pl-1">or drag and drop</p>
        </div>
        <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
    </div>
    </div>
</div>
<div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div>

<button type="submit" :disabled="form.processing" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
</form>

The code above uses the Vue v-on directive short end syntax @submit.prevent="form.post(route('admin.photos.store'))" on the form tag, and the dom event submit with the prevent modifier.

Then it uses the form variable that we created earlier and a post method. This is available because we are using the useForm class.

Next we point the form to the route named admin.photos.store that we created earlier.

Inside the form we have two groups of inputs. First, we have the textarea that uses the v-model to bind it to the property form.description that we declared before.

The second group uses the form.path in a Tailwind component (showing the markup for a drop file area).

Right now we are allowing users to upload only a single photo using the v-on directive on the input DOM event @input="form.path = $event.target.files[0]".

The last two things to notice are the error handling done via <div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div> for the path and also for the description.

Finally we use form.processing to disable the submit button while the form is processing.

The next step is to define the logic to save the data inside the database.

How to Store Data

To store the data, we can edit the route we defined earlier like so:

Route::post('/photos', function (Request $request) {
    //dd('I will handle the form submission')  

    //dd(Request::all());
    $validated_data = $request->validate([
        'path' => ['required', 'image', 'max:2500'],
        'description' => ['required']
    ]);
    //dd($validated_data);
    $path = Storage::disk('public')->put('photos', $request->file('path'));
    $validated_data['path'] = $path;
    //dd($validated_data);
    Photo::create($validated_data);
    return to_route('admin.photos');
})->name('photos.store');

The code above uses dependency injection to allow us to use the parameter $request inside the callback function.

We first validate the request and save the resulting array inside the variable $validated_data. Then we use the Storage facades to save the file in the filesystem and obtain the file path that we store inside the $path variable.

Finally we add a path key to the associative array and pass to it the $path variable. Next we create the resource in the database using the Photo::create method and redirect the user to the admin.photos page using the new to_route() helper function.

Make sure to import the Request class and the Storage facades at the top of the web.php file like so:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

Now we can add a new photo in the database and show a list of photos for both the admin and standard visitors.

Next we need to complete the CRUD operations and allow the user to edit/update a photo and delete it.

How to Update Operations

Let's start by adding the routes responsible for showing the forms used to edit the resource and update its values onto the database.

Just under the other routes in the Admin group, let's add the following code:

Route::get('/photos/{photo}/edit', function(Photo $photo){
     return inertia('Admin/PhotosEdit', [
            'photo' => $photo
        ]);
})->name('photos.edit');

The route above uses dependency injection to inject inside the function the current post, selected by the URI /photos/{photo}/edit.

Next it returns the Inertia response via the inertia() function that accepts the Component name 'Admin/PhotosEdit' as its first parameter and an associative array as its second.

Doing ['photo' => $photo] will allow us to pass the $photo model as a prop to the component later.

Next let's add the new Page component under resources/js/Pages/Admin/PhotosEdit.vue

This will be its template:

<template>
    <app-layout title="Edit Photo">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Edit Photo</h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">
                    <div>
                        <label
                            for="description"
                            class="block text-sm font-medium text-gray-700"
                        >Description</label>
                        <div class="mt-1">
                            <textarea
                                id="description"
                                name="description"
                                rows="3"
                                class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                placeholder="lorem ipsum"
                                v-model="form.description"
                            />
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
                        <div
                            class="text-red-500"
                            v-if="form.errors.description"
                        >{{ form.errors.description }}</div>
                    </div>

                    <div class="grid grid-cols-2">
                        <div class="preview p-4">
                            <img :src="'/storage/' + photo.path" alt />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Photo</label>
                            <div
                                class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
                            >
                                <div class="space-y-1 text-center">
                                    <svg
                                        class="mx-auto h-12 w-12 text-gray-400"
                                        stroke="currentColor"
                                        fill="none"
                                        viewBox="0 0 48 48"
                                        aria-hidden="true"
                                    >
                                        <path
                                            d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label
                                            for="path"
                                            class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
                                        >
                                            <span>Upload a file</span>
                                            <input
                                                id="path"
                                                name="path"
                                                type="file"
                                                class="sr-only"
                                                @input="form.path = $event.target.files[0]"
                                            />
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
                                </div>
                            </div>
                            <div class="text-red-500" v-if="form.errors.path">{{ form.errors.path }}</div>
                        </div>
                    </div>

                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >Update</button>
                </form>
            </div>
        </div>
    </app-layout>
</template>

The template is actually identical to the Create component, except for a few things. The form points to a route that expects a paramenter that we pass as the second argument to the funtion route. It looks like this: <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">.

There is a section where we can see the original photo next to the upload form group:

 <div class="preview p-4">
    <img :src="'/storage/' + photo.path" alt />
</div>

The rest is identical, and here we have the script section:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm } from '@inertiajs/inertia-vue3';

export default defineComponent({
    components: {
        AppLayout,
    },
    props: {
        photo: Object
    },
    setup(props) {
        const form = useForm({
            _method: "PUT",
            path: null,
            description: props.photo.description,
        })

        return { form }
    },

});

Notice that we are passing a props object with the photo key, which allows us to reference the model in the template.

Next, this _method: "PUT", line of code is required to be able to submit a PUT request instead of the POST request called on the form tag.

Now let's implement the logic to handle the form submission inside the Route below.

In web.php just under the previous route, let's add one that responds to the PUT request submitted by our form.

Route::put('/photos/{photo}', function (Request $request, Photo $photo)
    {
        //dd(Request::all());

        $validated_data = $request->validate([
            'description' => ['required']
        ]);

        if ($request->hasFile('path')) {
            $validated_data['path'] = $request->validate([
                'path' => ['required', 'image', 'max:1500'],

            ]);

            // Grab the old image and delete it
            // dd($validated_data, $photo->path);
            $oldImage = $photo->path;
            Storage::delete($oldImage);

            $path = Storage::disk('public')->put('photos', $request->file('path'));
            $validated_data['path'] = $path;
        }

        //dd($validated_data);

        $photo->update($validated_data);
        return to_route('admin.photos');
    })->name('photos.update');

The route logic is straigthforward. First we validate the description, next we check if a file was uploaded and if so we validate it.

Then we delete the previously uploaded image Storage::delete($oldImage); before storing the new image onto the datadabse and update the resource using $photo->update($validated_data);.

As before with the store route, we redirect to the admin.photos route using return to_route('admin.photos');.

How to Delete a Resource

The last step we need to take is to write the logic to delete the photo. Let's start by adding the route.

Right below the previous route we can write:

Route::delete('/photos/{photo}', function (Photo $photo)
{
    Storage::delete($photo->path);
    $photo->delete();
    return to_route('admin.photos');
})->name('photos.delete');

This route is also using a wildcard in its URI to identify the resource. Next, its second paramenter is the callback that uses the dependency injection as before. Inside the callback we first delete the image from the filesystem using Storage::delete($photo->path);.

Then we remove the resource from the database $photo->delete(); and redirect the user back return to_route('admin.photos'); like we did in the previous reoute.

Now we need to add a delete button to the table we created in one of the previous steps to show all photos.

Inside the template section of the component Admin/Photos.vue within the v-for, we can add this Jetstream button:

<jet-danger-button @click="delete_photo(photo)">
    Delete
</jet-danger-button>

Find the table cell that has the ACTIONS comment and replace the DELETE text with the button above.

So the final code will be:

<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

As you can see there is a @click event listener on the button. It calls a method delete_photo(photo) that we need to define along with a bunch of other methods to have a nice modal opening to ask for confirmation from the user.

First import the Inertia helper function useForm:

// 0. Import the useForm class at the top of the script section along with all required components
import { useForm } from '@inertiajs/inertia-vue3';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";

Remember to register the component JetDangerButton inside the components object before moving forward.

Next add the setup() function in the script section and implement the logic required to submit the form and show a modal. The comments in the code will guide you thorought all the steps.

// 1. add the setup function
setup() {
    // 2. declare a form variable and assign to it the Inertia useForm() helper function 
    const form = useForm({
        // 3. override the form method to make a DELETE request
        _method: "DELETE",
    });
    // 4. define a reactive object with show_modal and photo property
    // this will be used to figure out when to show the modal and the selected post values
    const data = ref({
        show_modal: false,
        photo: {
            id: null,
            path: null,
            description: null,
        }
    })

    // 5. define the delete_photo function and update the values of the show_modal and photo properties
    // of the reactive object defined above. This method is called by the delete button and will record the details 
    // of the selected post
    const delete_photo = (photo) => {
        //console.log(photo);
        //console.log(photo.id, photo.path, photo.description);
        data.value = {
            photo: {
                id: photo.id,
                path: photo.path,
                description: photo.description
            },
            show_modal: true
        };
    }
    // 6. define the method that will be called when our delete form is submitted
    // the form will be created next
    const deleting_photo = (id) => {
        form.post(route('admin.photos.delete', id))
        closeModal();
    }
    // 7. delare a method to close the modal by setting the show_modal to false
    const closeModal = () => {
        data.value.show_modal = false;
    }
    // 8. remember to return from the setup function the all variables and methods that you want to expose 
    // to the template.
    return { form, data, closeModal, delete_photo, deleting_photo }

}

Finally outside the v-for loop add the modal using the following code. You can place this where you want but not inside the loop.

 <JetDialogModal :show="data.show_modal">
    <template #title>
        Photo {{ data.photo.description.slice(0, 20) + '...' }}
    </template>
    <template #content>
        Are you sure you want to delete this photo?

    </template>
    <template #footer>
        <button @click="closeModal" class="px-4 py-2">Close</button>
        <form @submit.prevent="deleting_photo(data.photo.id)">
            <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
        </form>
    </template>
</JetDialogModal>

This is our final JavaScript code:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import TableComponent from "@/Components/TableComponent.vue";
import { Link } from '@inertiajs/inertia-vue3';
import { useForm } from '@inertiajs/inertia-vue3';
import JetDialogModal from '@/Jetstream/DialogModal.vue';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";
export default defineComponent({
    components: {
        AppLayout,
        Link,
        TableComponent,
        JetDialogModal,
        JetDangerButton
    },
    props: {
        photos: Array,
    },

    setup() {

        const form = useForm({
            _method: "DELETE",
        });
        const data = ref({
            show_modal: false,
            photo: {
                id: null,
                path: null,
                description: null,
            }

        })


        const delete_photo = (photo) => {
            //console.log(photo);
            console.log(photo.id, photo.path, photo.description);
            data.value = {
                photo: {
                    id: photo.id,
                    path: photo.path,
                    description: photo.description
                },
                show_modal: true
            };
        }
        const deleting_photo = (id) => {
            form.post(route('admin.photos.delete', id))
            closeModal();
        }

        const closeModal = () => {
            data.value.show_modal = false;


        }

        return { form, data, closeModal, delete_photo, deleting_photo }

    }
});
</script>

And here we have the HTML:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                         <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                            View - Edit - 

                                            <jet-danger-button @click="delete_photo(photo)">
                                                Delete
                                            </jet-danger-button>
                                            </a>
                                        </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
         <JetDialogModal :show="data.show_modal">
            <template #title>
                Photo {{ data.photo.description.slice(0, 20) + '...' }}
            </template>
            <template #content>
                Are you sure you want to delete this photo?

            </template>
            <template #footer>
                <button @click="closeModal" class="px-4 py-2">Close</button>
                <form @submit.prevent="deleting_photo(data.photo.id)">
                    <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
                </form>
            </template>
        </JetDialogModal>
    </app-layout>
</template>

That's it. If you did everything correctly you should be able to see all photos, create new photos as well as edit and delete them.

I will leave you some home work. Can you figure out how to implement the view and edit links before the delete button in the section below?

<!-- ACTIONS -->
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

Wrapup and What's next

During this guide we took our first steps and learned how to build a single page application using Laravel as our backend framework and Vue3 for the front end. We glued them together with Inertia js and built a simple photo application that lets a user manage photos.

We are just at the beginning of a fantastic journey. Learning new technologies isn't easy, but thanks to their exaustive documentations we can keep up and build awesome applications.

Your next step to master Laravel, Vue3, Inertia and all the tech we have been using so far is to hit their documentation and keep learning. Use the app we have build if you want, and improve it or start over from scratch.

Just keep that in mind, coding is fun so relax and enjoy it.

Conclusion

This is just an overview of how I'd build a single page application using these technologies.

If you are familiar with server-side routing and Vuejs then you will enjoy bulding a single page application with Laravel, Inertia, and Vuejs. The learning curve isn't that steep plus you have great documentation to help you out.

I hope you've enjoyed this guide. If so, let me know and consider subscribing to my YouTube channel and following me on Twitter. And if you get stuck, get in touch for help.

You can find the source code for this guide here.

Follow me on Twitter Join me on slack

One of the first steps many young startups take is setting up a static web page, perhaps with an email newsletter, to help them build an audience.

As the weeks go by and the MVP is getting further along, the subject of how to handle payments will eventually emerge.

From one-time payments to SaaS subscriptions, supporting online payments can be daunting and time-consuming. This post will introduce you to an easy way to process online payments with Stripe, without any extra infrastructure other than a static web page.

You don't need a custom backend to store the payment information, or cron jobs to send invoices, and there's no need to track customers in a separate database. This is perfect if you are a single-founder or early-stage startup that wants to validate the idea without creating a custom solution.

Sounds good? Let's dive in! 🤿

High-level overview of the project

For the sake of this article, we'll define an early-stage startup use case, where this kind of serverless online payment setup will bring the most value (low cost and fast to implement).

Let's imagine our startup idea is to self-publish a book. As the book is being finalized, we would like to open the lifetime access to the book as a pre-sale.

We will need a way to process payments for lifetime access to the book. For this, we'll need a payment processor and perhaps a way to run some logic away from the client (for example, leveraging the payment processor's API).

Payment processor

There are plenty of payment processors available, each with different terms, support for payment methods, and public APIs. For our serverless online payment processor, we'll use Stripe. I chose to use Stripe for two reasons:

First, Stripe is an industry-leading payment processor with an excellent API. Their API is extensively documented, and they offer integration SDKs for many languages (JS included). Setting it up is entirely free, and you only pay a small commission per processed transaction.

Second, Stripe offers Stripe Checkout, a free product specifically built to boost conversions and support various payment options. It's dead-simple to integrate and comes with a great UI.

What about the server?

To be clear, Stripe requires some server-side code to generate a session once a user inputs their payment data. The session is available to the developer to perform payment-related operations (without exposing the sensitive payment details).

Before you get really upset with me, let me clarify that we won't need to set up a dedicated server 😅. It may seem a bit contradictory, but Stripe requires that some of the interaction code is in a server-like environment (serverless computing to the rescue!).

Luckily for us, this is 2021, and there are quite a few options to execute on-demand server-side code. Most cloud providers offer this functionality (AWS lambdas, Google Cloud cloud functions, Azure functions…you name it).

Since our startup already has a web page, we'll use Netlify functions. It will allow us to run the server-side code with almost no extra configuration, and it plays nicely with the existing web page statics.

The paradigm of combining static web assets with on-demand serverless functions is part of the JAM Stack (we'll leave that for another post). Keep reading for the detailed instruction on how to set up serverless payments.

High-level schema of the solution

Step-by-step project setup

Great, now that you have a clear picture of the problem space and the tools we'll use to build our solution, let's build it. 🛠

The complete code example is available at https://github.com/aperkaz/serverless-payments.

How to set up Netlify

First, create a Netlify account (if you don't have one already). The free tier is enough for moderate usage, so no need to worry about that.

Netlify provides CI/CD for automated deployments of our webpage and serverless functions by connecting to a Git repo in Github / Gitlab / Bitbucket. So, let's create a repo in one of those providers with your website assets.

Next, install the Netlify CLI. It will ask you some questions and request access to your Netlify and Git repo provider (GitHub in my case).

Installing the CLI with npm install netlify-cli -g

At this point, we can push to the repository’s main / master branch, and Netlify will automatically deploy. You can run netlify open in the console to open Netlify’s admin panel, and visit the deployed URL.

Excellent, with the auto-deploy ready, now let's set up Stripe. 💸

How to set up Stripe

Create an account in Stripe, validate the email, and sign in. Then, generate a set of API keys (Secret key and Publishable key).

You have to be careful with those keys and never commit the Secret key in the code. Since we will need it in our server-side code, we'll keep it as an environment variable.

# Create a new env variable in Netlify
netlify env:set STRIPE_SECRET "sk_****"

# We can access it on our server-side JS code by:
process.env.STRIPE_SECRET

For the sake of this tutorial, we will use the example API keys, but feel free to use your own. If you use your keys, you will need to add products and prices (documentation).

How to add the serverless functions

Hang on tight – we are almost there! We only need the server-side code to create Stripe Checkout sessions and complete our demo.

First, to make our function accessible from https://serverless-payments.netlify.app/api/stripe, we need to add some configurations. Let's start by creating the netlify.toml file, on the root of our repo.

[build]
  command = "# no build command"
  functions = "netlify/functions"
  publish = "."

[[redirects]]
  from = '/api/*'
  to = '/.netlify/functions/:splat'
  status = 200

Then, we can add the session creator function. It’s explained here.

// netlify/function/stripe.js

const stripe = require("stripe")(process.env.STRIPE_SECRET);

exports.handler = async (event, context) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        price_data: {
          currency: "usd",
          product_data: {
            name: "T-shirt",
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "https://serverless-payments.netlify.app/success",
    cancel_url: "https://serverless-payments.netlify.app/cancel",
  });
  return {
    statusCode: 200,
    body: JSON.stringify({
      id: session.id,
    }),
  };
};

Now we can call the serverless functions from our JS body with fetch("/api/stripe"). It will scale depending on the load and you only paid for the invocations. Then it will be deployed on every push to main. Sweet! 🍬

For the sake of brevity, I skipped the remaining code in the HTML files that handles the Stripe Checkout callbacks. The code is available here.

The complete example is available at https://serverless-payments.netlify.app . You can test a successful payment flow by using 4242 4242 4242 4242 as a credit card number.

Stripe Checkout in all its glory, accessible from [our page](https://serverless-payments.netlify.app" rel="noreferrer nofollow noopener)

Conclusion

Online payments are critical to many online businesses but are often implemented in a rush or are over-engineered. The solution presented above applies to single-page applications, so you may not need a fully-fledged server for handling payments just yet. 🙂

I hope this article helps shed some light on adding payment processing to your existing web pages easily. Sell your product quickly and make customers happy!

Now and then you have used some back-end technologies, but you've always stayed in your comfort zone, perhaps in the JavaScript world. 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 ?.

What Will We Build

?‍? 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.

Installation

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.

How to Set Up the Front End

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.

npm install -g @vue/cli

After successfully installing the Vue CLI, we should be able to start using it to install and configure Vue.js itself. Let's do with the following process.

Step 1: Create a new empty project directory and open it with the following commands:

mkdir pizza-app
cd pizza-app

Step 2: While in the project root, run the following:

vue create frontend

Then from the provided options, select the following:

• Manual select features

Vue.js installation - Manually select features

• Babel

• Router

• CSS-Preprocessors (SASS)

Vue.js installation - select features

Then select version 2.x from the next screen:

Select version 2.x

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:

cd frontend
npm run serve

After the app is running, you can see it in your browser on http://localhost:8080:

Vue.js default installation screen

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.

How to Set Up the Back End

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:

dotnet new web -o backend

gitignore.io

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.

Use gitignore.io to generate a .gitignore file

Also, at the top of the generated file, it saves links for creation or subsequent editing, as shown below.

# Created by https://www.toptal.com/developers/gitignore/api/webstorm,vue,vuejs,visualstudio
# Edit at https://www.toptal.com/developers/gitignore?templates=webstorm,vue,vuejs,visualstudio

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:

dotnet add package Microsoft.AspNetCore.SpaServices.Extensions --version 3.1.8

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:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;

namespace backend
{
    public class Startup
    {
        public IConfiguration Configuration { get; }

        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            string connectionString = Configuration.GetConnectionString("DefaultConnection");
            services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(connectionString));
            services.AddSpaStaticFiles(configuration: options => { options.RootPath = "wwwroot"; });
            services.AddControllers();
            services.AddCors(options =>
            {
                options.AddPolicy("VueCorsPolicy", builder =>
                {
                    builder
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials()
                    .WithOrigins("https://localhost:5001");
                });
            });
            services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddJwtBearer(options =>
                {
                    options.Authority = Configuration["Okta:Authority"];
                    options.Audience = "api://default";
                });
            services.AddMvc(option => option.EnableEndpointRouting = false);
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ApplicationDbContext dbContext)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseCors("VueCorsPolicy");

            dbContext.Database.EnsureCreated();
            app.UseAuthentication();
            app.UseMvc();
            app.UseRouting();
            app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
            app.UseSpaStaticFiles();
            app.UseSpa(configuration: builder =>
            {
                if (env.IsDevelopment())
                {
                    builder.UseProxyToSpaDevelopmentServer("http://localhost:8080");
                }
            });
        }
    }
}

? 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:

cd backend
dotnet run

How to Set Up Authentication

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:

cd frontend
npm i @okta/okta-vue

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.

To install it, run the following from your frontend folder:

npm i vue bootstrap-vue bootstrap

How to Set Up the Router

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):

Vue.use(Auth, {
  issuer: 'https://dev-914982.okta.com/oauth2/default',
  client_id: '0oatq53f87ByM08MQ4x6',
  redirect_uri: 'https://localhost:5001/implicit/callback',
  scope: 'openid profile email'
})

....

router.beforeEach(Vue.prototype.$auth.authRedirectGuard())

Home screen

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:

<template>
  <div id="app">
    <header>
      <b-navbar toggleable="md" type="light" variant="light">
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-navbar-brand to="/">Love Pizza</b-navbar-brand>
        <b-collapse is-nav id="nav-collapse">
          <b-navbar-nav>
            <b-nav-item href="#" @click.prevent="login" v-if="!user">Login</b-nav-item>
            <b-nav-item href="#" @click.prevent="logout" v-else>Logout</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </header>
    <main>
      <div>
        Love pizza button and clicks counter here
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      user: null
    }
  },
  async created() {
    await this.refreshUser()
  },
  watch: {
    '$route': 'onRouteChange'
  },
  methods: {
    login() {
      this.$auth.loginRedirect()
    },
    async onRouteChange() {
      await this.refreshUser()
    },
    async refreshUser() {
      this.user = await this.$auth.getUser()
    },
    async logout() {
      await this.$auth.logout()
      await this.refreshUser()
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

By now your app might look something like this:

Vue.js front-end app - work in progress

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.

<main>
  <div>
      Love pizza button and clicks counter here
  </div>
</main>

Authentication on the back end

By now, we have setup our front end to leverage the authentication service provided by Okta. But in order to have the whole picture ready to use, we need to do the same in our back-end app.

This is where we will be doing HTTP calls from, in order to communicate with the database. And, as you will see later, some of these calls will need to be authenticated in order to succeed.

Let's start again with installing some packages that will make our job easier. In your terminal, go to your backend directory and run the following:

dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer --version 3.1.8
dotnet add package Microsoft.Extensions.Configuration --version 3.1.7

Then we need another package that will help us set up our database. We will use the SQLite database which is super easy to use in .NET Core setup.

While still in the backend folder, run:

dotnet add package Microsoft.EntityFrameworkCore.Sqlite --version 2.1.1

Once we're finished with the installations, make sure you got the full content of Startup.cs file (and if you didn't, do so now).

PizzaVotesApiService

OK everyone, we have set up both our front and back ends to support authentication. We have added SQLite as a database to be used for storing the users votes. And we have an initial version of our home screen.

Now it's time to implement a service on the front end that will allow us to consume our back end's API.

Great job so far! ?

Before being able to make HTTP calls from our front-end app to our back-end app, we need to install one more package in our Vue.js app. It's called axios and it gives us the ability to make XMLHttpRequests from the browser, which is exactly what we need.

Open your terminal, go to the frontend of your project, and run:

npm i axious

Then, in your IDE, go to the src folder of your front-end app, create a new .js file, and add the following inside it:

import Vue from 'vue'
import axios from 'axios'

const client = axios.create({
    baseURL: 'http://localhost:5000/api/pizzavotes',
    json: true
})

export default {
    async execute(method, resource, data) {
        const accessToken = await Vue.prototype.$auth.getAccessToken()
        return client({
            method,
            url: resource,
            data,
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        }).then(req => {
            return req.data
        })
    },
    getAll() {
        return this.execute('get', '/')
    },
    getById(id) {
        return this.execute('get', `/${id}`)
    },
    create(data) {
        return this.execute('post', '/', data)
    },
    update(id, data) {
        return this.execute('put', `/${id}`, data)
    },
}

I have named mine PizzaVotesApiService.js. We will stop with integrating the API for a while and will create another component that will hold the controls the users will use to interact with this API.

Dashboard Component

Say hello to our Dashboard.vue component.

This is where we will put the 'I love it' button and a small votes counter.

'I love it' button and votes counter

We'll also add a nice pizza image.

Pizza image

As well as a nice bar chart, showing the top X voters.

Top voters bar chart

You may copy and paste the full content of the file from my repo so we can continue with integrating the whole thing.

API Integration

I am going to use a small diagram to depict the data flow. As they say, "a picture is worth a thousand words:"

Data flow diagram

As you can see (I hope ?) from the diagram, when the user enters their votes, the data goes from the dashboard component through the API service we created for communicating with the back-end API. It then reaches the back-end controller that is actually making the HTTP calls.

Once the data is fetched, the service passes it back to our UI where we show it via our Vue.js components. As you will see, there is some additional logic that checks if the user is authenticated in order to know which calls to execute.

Here is the implementation of the controller itself:

using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

namespace backend.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class PizzaVotesController : ControllerBase
    {
        private readonly ApplicationDbContext _dbContext;

        public PizzaVotesController(ApplicationDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        // GET api/pizzavotes
        [HttpGet]
        public async Task<ActionResult<List<PizzaVotes>>> Get()
        {
            return await _dbContext.PizzaVotes.ToListAsync();
        }

        // GET api/pizzavotes/{email}
        [Authorize]
        [HttpGet("{id}")]
        public async Task<ActionResult<PizzaVotes>> Get(string id)
        {
            return await _dbContext.PizzaVotes.FindAsync(id);
        }

        // POST api/pizzavotes
        [Authorize]
        [HttpPost]
        public async Task Post(PizzaVotes model)
        {
            await _dbContext.AddAsync(model);
            await _dbContext.SaveChangesAsync();
        }

        // PUT api/pizzavotes/{email}
        [Authorize]
        [HttpPut("{id}")]
        public async Task<ActionResult> Put(string id, PizzaVotes model)
        {
            var exists = await _dbContext.PizzaVotes.AnyAsync(f => f.Id == id);
            if (!exists)
            {
                return NotFound();
            }

            _dbContext.PizzaVotes.Update(model);

            await _dbContext.SaveChangesAsync();

            return Ok();
        }
    }
}

Here we have four methods for executing four basic operations:

• get all records from the database

• get the records for one user (by their email address)

• create a new user record

• update an existing user's records.

You have probably noticed the [Authorize] clause above in three of the four methods. Those methods are going to require the user to be authenticated in order to execute.

We will leave the method GET api/pizzavotes for getting all records unauthorized on purpose. Since we would like to show the bar chart on the home screen to all users, we will need to be able to make this call, no matter if the user is authenticated or not.

Allow registration

Something to note: if you would like to have a 'Sign Up' on your login screen, you need to allow it from the Okta admin panel.

Once logged in, select from the menu Users->Registration:

Allow registration for new users

Finish the back end

In order for your back-end app to become fully functioning, please take a look at my repo here and add the missing files.

If you have followed along up to this point you should have the following files (except the test folder, as we are going to add it a bit later):

Back-end app structure

Finish the front end

In order to finalize the work on our front-end app, we will create two more components.

The first one will render the bar chart mentioned above, and the second one will display the email address of the user that is currently logged in.

In your IDE, go to frontend/src/components and create two files, named Username.vue and VotesChart.vue, respectively.

Username.vue is a very short and simple component that takes the user's email address as a prop and renders it. Here is its implementation:

<template>
  <div class="username">{{ username }}</div>
</template>

<script>
export default {
  props: { username: String },
}
</script>

<style lang="scss">
.username {
  color: rebeccapurple;
  display: flex;
  align-items: center;
  justify-content: center;
}

.username::before {
  content: "•";
}

.username::after {
  content: "•";
}
</style>

The only thing to notice here is that we are using SASS/SCSS for the component styles. That is possible because we chose that option in the beginning (when we were installing our Vue.js app).

For drawing the chart we will use a package called vue-chartsjs. Install it by running the following command from your frontend folder:

npm i vue-chartjs chart.js

Our component VotesChart.vue is going to be kind of wrapper for the bar chart component that comes from the vue-chartjs package.

We use it for getting the data from the parent component, Dashboard.vue, and processing it.

We sort the data array in order to display our top voters, sorted from the largest to the smallest number of votes. Then we pass it to the Bar chart component to visualize it.

Here is the full implementation:

<script>
import { Bar } from 'vue-chartjs'

const TOP_N_VOTERS_TO_SHOW_ON_CHART = 10

// Used to sort by votes value - from bigger to smaller (desc)
function sortByStartDate(nextUser, currentUser) {
  const nextVoteValue = nextUser.value
  const currentVoteValue = currentUser.value
  return currentVoteValue - nextVoteValue
}

export default {
  extends: Bar,
  props: { data: Array },

  watch: {
    data: async function (newVal) {
      const sortedVotes = Array.from(newVal).sort(sortByStartDate).slice(0, TOP_N_VOTERS_TO_SHOW_ON_CHART)
      this.labels = sortedVotes.map(user => user.id)
      this.values = sortedVotes.map(user => user.value)

      this.renderChart({
        labels: this.labels,
        datasets: [
          {
            label: 'Pizza Lovers',
            backgroundColor: '#f87979',
            data: this.values,
          }
        ]
      }, {
        scales: {
          yAxes: [{
            ticks: {
              stepSize: 1,
              min: 0,
              max: this.values[0]
            }
          }]
        }
      })
    }
  }
}
</script>

Note that there is a constant at the top of the file which will define how many top voters we would like to show on this chart. Currently it is set to 10, but you can amend it as you like.

Once you are ready with all the front-end stuff and want to run the app, you can do so by:

Going to the frontend folder and running:

npm run serve

Going to the backend folder and running:

dotnet run

Opening your browser and going to https://localhost:5001.

How to test our applications

So far we have built a modern and fully functioning single page application with a .NET Core back end and a SQLite database. That's a lot of work. Congrats! ✨

We easily could stop here and go have some cold ?.

But...

We are reasonable enough to know that if we don't test our apps, we can't guarantee that they will work as expected.

We also know that if we want to make our code testable, we should write in a well structured manner, keeping in mind the main principles of software design.

I hope I've convinced you to continue working through this tutorial. After all, the only thing left for us to do is to write some tests for both of our applications. So let's do it!

We will cover the functioning of our back end API with integration tests, and for our front end we will write both unit and integration tests.

Unit and integration tests

? Before going to the code, I would like to say a few words about these types of tests and answer some of most frequently asked questions.

You might be wondering, what are unit tests? What are integrations tests? Why do we need them? When should we use each of them?

Starting from the first question, a unit test is a piece of code that tests the functionality of an encapsulated module (meaning another piece). It's written in as a function or some kind of independent block of code.

They are good to have, because they give you quick development time feedback and keep the code safe from regressions when new features are being added.

Integration tests are useful when we need to test how multiple modules/units are working together. For example a REST API and a database interaction.

Depending on the size of the application we are working on, we might need only integration tests. But sometimes we need both integration and unit tests to bullet proof our code.

Ideally, we should have them both, as they are essential parts of the testing pyramid and are the cheapest to implement.

But in some cases, like for our back-end app, only integration tests are necessary to cover the functionality that is worth being tested. We have only several API methods for working with the database.

How to Create Our Back End Tests

This time we will start with creating our test solution. To do so, you need to do a few things.

First, install the xUnit library by running the following from your project root directory:

dotnet add package xUnit

Then go to your backend folder and create and empty folder called tests . Then inside that folder run:

dotnet new xunit -o PizzaVotes.Tests

Once that's done, open backend.csproj and add the following two lines to the <PropertyGroup> block:

<GenerateAssemblyInfo>false</GenerateAssemblyInfo>
<GenerateTargetFrameworkAttribute>false</GenerateTargetFrameworkAttribute>

Then go to your tests folder and install the following packages:

Microsoft.AspNetCore.Mvc
Microsoft.AspNetCore.Mvc.Core
Microsoft.AspNetCore.Diagnostics
Microsoft.AspNetCore.TestHost
Microsoft.Extensions.Configuration.Json
Microsoft.AspNetCore.Mvc.Testing

You do that by executing each of the following commands in your terminal app:

dotnet add package Microsoft.AspNetCore.Mvc --version 2.2.0
dotnet add package Microsoft.AspNetCore.Mvc.Core --version 2.2.5
dotnet add package Microsoft.AspNetCore.Diagnostics --version 2.2.0
dotnet add package Microsoft.AspNetCore.TestHost --version 3.1.8
dotnet add package Microsoft.AspNetCore.Mvc.Testing --version 3.1.8

After we have everything installed, we are ready to proceed to actually writing some tests.

As you may see here, except the tests themselves, I have added two more files which we need or are good to have when running the tests.

One of them is just a helper file with one method for dealing with serialized objects and getting the string content. The other is the fixture file, where we have configurations and settings for our test server and client.

And, of course, there's a file with our tests.

I am not going to paste the content of these files here, as this tutorial has become long enough already.

You can just copy them from my repository.

If you take a closer look at the tests, you might notice that we are testing only the first, not authenticated, call for a success response. The rest we are checking only for 401 HTTP response, which is Unautorized.

That's because only the first method is public, that is, it doesn't need authentication.

If we were to have the same tests for all methods, we would have needed to implement a middleware just to authorize our test app in front of Okta's authentication services.

And since the purpose of this tutorial is to learn a variety of things, we might say it's not worth doing.

Now the fun part: how to run the tests. It turns out to be super simple. Just go to your tests directory (where the tests.sln file is) from your terminal and run:

dotnet test

You should see something like this in your terminal (ignore the yellow warnings):

Running back-end tests

How to Create Our Front-end Tests

It's time to add some tests to our front end. Here we will do both unit and integration tests.

Unit tests
As I mentioned above, unit tests are suitable when we have a module or a component that doesn't have dependencies from the outside world.

Such components turn out to be our Username.vue and VotesChart.vue components.

They are representational components that receive the data they need to function properly via props. This means we can write our tests in the same manner: pass them the data they need and check whether the results of their execution are as expected.

Here's an important thing to mention. It's not that what is provided by the @vue/test-utils package (that comes from installing Vue.js), was not enough to test both components.

Rather, for educational purposes, I have decided to install and use the Vue Testing Library as well. That's why one of the components below is tested with @vue/test-utils, but the other is tested with @testing-library/vue.

Don't forget to install it before running the test:

npm i --save-dev @testing-library/vue

Again, to save space, I am not going to paste the component test's code here, but you can easily see it here and here.

Then in order to run the unit tests of your front-end app, go to the frontend folder and execute:

npm run test:unit

Integration test
This is probably more interesting for some of you.

If you remember the beginning of this tutorial when we installed our Vue.js app, for our e2e (or integartion) tests solution we selected Cypress.js.

This is a super easy-to-use tool that allows developers to write real e2e tests for their applications by giving them immediate feedback.

From personal experience I would say that working with Cypress is more of a pleasure than with other similar frameworks. If you have previous experience with frameworks like Nightwatch.js or Selenium, what you see below might be familiar to you.

Before running our tests with Cypress, we need to do some minor changes in its configuration.

Find the index file under the plugins folder and add the following line to the return statement in the end of the file:

  baseUrl: "https://localhost:5001"

Now update the content of the test.js under the specs folder as it's shown here.

Once you have it all done, you should be able to run your e2e tests via Cypress. You can do so by executing the following command while you're in your frontend directory:

npm run test:e2e

⚡Don't forget to start your back-end app before executing the e2e tests so that they work properly.

If you have followed along, after running the command above you should see something like this in your terminal:

Running e2e tests

And a new browser window will be opened by Cyrpess.js itself, where you can use the provided UI to see and run your tests.

Cypress.js UI

And when all tests pass, you are supposed to see a screen like this:

e2e tests pass successfully

Conclusion

In this tutorial, we have seen how to use one of the hottest technologies on the market, for both the front end and back end.

We've also learned how to combine them properly in order to build a small but fully functioning single page application with database support.

Finally, we also have written unit and integration tests for both ends.

I believe this kind of exercise is beneficial for both experienced and beginner readers, as it covers a lot of different stuff in a step-by-step manner. And you end up with a working example app if you've finished the entire process.

This tutorial ended up being much longer than I initially thought it would be. But if you have done it all, I admire you ?! And I hope it was pleasure for you reading it, as it was for me writing it.

? Thanks for reading! ?

Resources

You may find below the links that were useful to me in some way while writing this.

https://consultwithgriff.com/spas-with-vuejs-aspnetcore/
https://github.com/okta/okta-auth-dotnet
https://docs.microsoft.com/en-us/dotnet/core/testing/unit-testing-with-dotnet-test
https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpresponsemessage?view=netcore-3.1
https://vue-test-utils.vuejs.org/guides/#testing-key-mouse-and-other-dom-events
https://docs.cypress.io/guides/references/configuration.html#Options
https://docs.cypress.io/guides/tooling/visual-testing.html#Functional-vs-visual-testing
https://www.codingame.com/playgrounds/35462/creating-web-api-in-asp-net-core-2-0/part-3---integration-tests
https://testing-library.com/docs/vue-testing-library/intro
https://www.valentinog.com/blog/canvas/

If you have just started with React, you are probably still wrapping your head around the whole Single Page Application concept.

Traditionally routing works like this: let's say you type in /contact in the URL. The browser will make a GET request to the server, and the server will return an HTML page as the response.

But, with the new Single Page Application paradigm, all the URL requests are served using the client-side code.

Applying this in the context of React, each page will be a React component. React-Router matches the URL and loads up the component for that particular page.

Everything happens so fast, and seamlessly, that the user gets a native app-like experience on the browser. There is no flashy blank page in between route transitions.

In this article, you'll learn how to use React-Router and its components to create a Single Page Application. So open up your favorite text editor, and let's get started.

Setup the project

Create a new React project by running the following command.

yarn create react-app react-router-demo

I'll be using yarn to install the dependencies, but you can use npm as well.

Next, let's install react-router-dom.

yarn add react-router-dom

For styling the components, I'm going to use the Bulma CSS framework. So let's add that as well.

yarn add bulma

Next, import bulma.min.css in the index.js file and clean up all the boilerplate code from the App.js file.

import "bulma/css/bulma.min.css";

Now that you have the project set up let's start by creating a few page components.

Creating the Page Components

Create a pages directory inside the src folder where we will park all the page components.

For this demo, create three pages - Home, About, and Profile.

Paste the following inside the Home and About components.

// pages/Home.js

import React from "react";

const Home = () => (
  <div>
    <h1 className="title is-1">This is the Home Page</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida,
      risus at dapibus aliquet, elit quam scelerisque tortor, nec accumsan eros
      nulla interdum justo. Pellentesque dignissim, sapien et congue rutrum,
      lorem tortor dapibus turpis, sit amet vestibulum eros mi et odio.
    </p>
  </div>
);

export default Home;

// pages/About.js

import React from "react";

const About = () => (
  <div>
    <h1 className="title is-1">This is the About Page</h1>
    <p>
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus
      et ultrices posuere cubilia curae; Duis consequat nulla ac ex consequat,
      in efficitur arcu congue. Nam fermentum commodo egestas.
    </p>
  </div>
);

export default About;

We will create the Profile page later on in the article.

Create the Navbar Component

Let's start by creating the navigation bar for our app. This component will make use of the <NavLink /> component from react-router-dom.

Create a directory called "components" inside the src folder.

// components/Navbar.js

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return ( 
      <nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
          {/* ... */}
      </div>
    </nav>
  );
 };

 export default Navbar;

The isOpen state variable will be used to trigger the menu on mobile or tablet devices.

So let's add the hamburger menu.

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return ( 
      <nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
      <div className="navbar-brand">
          <a
            role="button"
            className={`navbar-burger burger ${isOpen && "is-active"}`}
            aria-label="menu"
            aria-expanded="false"
            onClick={() => setOpen(!isOpen)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
          {/* ... */}
      </div>
    </nav>
  );
 };

To add the link in the menu, use the <NavLink /> component by react-router-dom.

The NavLink component provides a declarative way to navigate around the application. It is similar to the Link component, except it can apply an active style to the link if it is active.

To specify which route to navigate to, use the to prop and pass the path name.
The activeClassName prop will add an active class to the link if it's currently active.

<NavLink
    className="navbar-item"
    activeClassName="is-active"
    to="/"
    exact
>
    Home
</NavLink>

On the browser, the NavLink component is rendered as an <a> tag with an href attribute value that was passed in the to prop.

Also, here you need to specify the exact prop so that it is matched precisely with the URL.

Add all the links and finish up the Navbar component.

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
        <div className="navbar-brand">
          <a
            role="button"
            className={`navbar-burger burger ${isOpen && "is-active"}`}
            aria-label="menu"
            aria-expanded="false"
            onClick={() => setOpen(!isOpen)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>

        <div className={`navbar-menu ${isOpen && "is-active"}`}>
          <div className="navbar-start">
            <NavLink className="navbar-item" activeClassName="is-active" to="/">
              Home
            </NavLink>

            <NavLink
              className="navbar-item"
              activeClassName="is-active"
              to="/about"
            >
              About
            </NavLink>

            <NavLink
              className="navbar-item"
              activeClassName="is-active"
              to="/profile"
            >
              Profile
            </NavLink>
          </div>

          <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                <a className="button is-white">Log in</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

If you notice here, I've added a Login button. We will come back to the Navbar component again when we discuss protected routes later on in the guide.

Rendering the pages

Now that the Navbar component is set up let's add that to the page and start with rendering the pages.

Since the navigation bar is a common component across all the pages, instead of calling the component in each page component, it will be a better approach to render the Navbar in a common layout.

// App.js

function App() {
  return (
    <>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        {/* Render the page here */}
      </div>
    </>
  );
}

Now, add the page components inside of the container.

// App.js

function App() {
  return (
    <>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        <Home />
          <About />
      </div>
    </>
  );
}

If you check out the results now, you'll notice that both the Home and the About page component gets rendered onto the page. That's because we haven't added any routing logic yet.

You need to import the BrowserRouter component from React Router to add the ability to route the components. All you need to do is wrap all the page components inside of the BrowserRouter component. This will enable all the page components to have the routing logic. Perfect!

But again, nothing's going to change with the results – you are still going to see both the pages rendered. You need to render the page component only if the URL matches a particular path. That's where the Route component from React Router comes into play.

The Router component has a path prop that accepts the page's path, and the page component should be wrapped with the Router, as shown below.

<Route path="/about">
  <About />
</Route>

So let's do the same for the Home component.

<Route exact path="/">
  <Home />
</Route>

The exact prop above tells the Router component to match the path exactly. If you don't add the exact prop on the / path, it will match with all the routes starting with a / including /about.

If you go check out the results now, you'll still see both the components rendered. But, if you go to /about, you'll notice that only the About component gets rendered. You see this behavior because the router keeps matching the URL with the routes even after it had matched a route already.

We need to tell the router to stop matching further once it matches a route. This is done using the Switch component from React Router.

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

There you go! You have successfully configured routing in your React app.

Protected Routes and Redirect

When working on Real-world applications, you will have some routes behind an authentication system. You are going to have routes or pages that can only be accessed by a logged-in user. In this section, you'll learn how to go about implementing such routes.

Please note that I'm not going to create any login form or have any back-end service authenticate the user. In a real application, you wouldn't implement authentication the way demonstrated here.

Let's create the Profile page component that should only be accessed by the authenticated user.

// pages/Profile.js

import { useParams } from "react-router-dom";

const Profile = () => {
  const { name } = useParams();
  return (
    <div>
      <h1 className="title is-1">This is the Profile Page</h1>
      <article className="message is-dark" style={{ marginTop: 40 }}>
        <div className="message-header">
          <p>{name}</p>
        </div>
        <div className="message-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "}
          <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
          nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
          purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac{" "}
          <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
          sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
          magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales
          sem.
        </div>
      </article>
    </div>
  );
};

We will grab the user's name from the URL using route parameters.

Add the Profile route into the router.

<Route path="/profile/:name">
  <Profile />
</Route>

Currently the profile page can be accessed directly. So to make it an authenticated route, create a Higher-Order component (HOC) to wrap the authentication logic.

const withAuth = (Component) => {
  const AuthRoute = () => {
    const isAuth = !!localStorage.getItem("token");
    // ...
  };

  return AuthRoute;
};

To determine if a user is authenticated or not, grab the authentication token that is stored in the browser when the user logs in. If the user is not authenticated, redirect the user to the Home page. The Redirect component from React Router can be used to redirect the user to another path.

const withAuth = (Component) => {
  const AuthRoute = () => {
    const isAuth = !!localStorage.getItem("token");
    if (isAuth) {
      return <Component />;
    } else {
      return <Redirect to="/" />;
    }
  };

  return AuthRoute;
};

You can also pass in other user information like name and user ID using props to the wrapped component.

Next, use the withAuth HOC in the Profile component.

import withAuth from "../components/withAuth";

const Profile = () => {
 // ...
}

export default withAuth(Profile);

Now, if you try to visit /profile/JohnDoe, you will get redirected to the Home page. That's because the authentication token is not yet set in your browser storage.

Alright, so, let's return to the Navbar component and add the login and logout functionalities. When the user is authenticated, show the Logout button and when the user is not logged in show the Login button.

// components/Navbar.js

const Navbar = () => {
    // ...
    return (
        <nav
          className="navbar is-primary"
          role="navigation"
          aria-label="main navigation"
        >
        <div className="container">
            {/* ... */}
            <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                {!isAuth ? (
                  <button className="button is-white" onClick={loginUser}>
                    Log in
                  </button>
                ) : (
                  <button className="button is-black" onClick={logoutUser}>
                    Log out
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
        </nav>
    );
}

When the user clicks on the login button, set a dummy token in the local storage, and redirect the user to the profile page.

But we cannot use the Redirect component in this case – we need to redirect the user programmatically. Sensitive tokens used for authentication are usually stored in cookies for security reasons.

React Router has a withRouter HOC that injects the history object in the props of the component to leverage the History API. It also passes the updated match and location props to the wrapped component.

// components/Navbar.js

import { NavLink, withRouter } from "react-router-dom";

const Navbar = ({ history }) => { 
  const isAuth = !!localStorage.getItem("token");

  const loginUser = () => {
    localStorage.setItem("token", "some-login-token");
    history.push("/profile/Vijit");
  };

  const logoutUser = () => {
    localStorage.removeItem("token");
    history.push("/");
  };

  return ( 
   {/* ... */}
  );
};

export default withRouter(Navbar);

And voilà! That's it. You have conquered the land of authenticated routes as well.

Check out the live demo here and the complete code in this repo for your reference.

Conclusion

I hope by now you have a fair idea of how client-side routing works in general and how to implement routing in React using the React Router library.

In this guide, you learned about the vital components in React Router like Route, withRouter, Link, and so on, along with some advanced concepts like authenticated routes, that are required to build an application.

Do check out the React Router docs to get a more detailed overview of each of the components.

This article is based on my capstone for the City University of Seattle. The title of my research is "Software Documentation and Architectural Analysis of Full Stack Development". The goal of my research was to reduce the learning curve in understanding open source projects and full stack development, and I choose the MEAN Stack.

I have created the following diagrams, using Lucidchart, for easier comprehension. These UML diagrams were based on the 4+1 architectural view model:

• Restaurant Analogy
• Process View using Sequence Diagram
• Scenario using Sequence Diagram
• Physical View using Deployment Diagram
• Development View using Package Diagram
• Logical View using Class Diagram

The research was more focused on Deployment and Request and Response Flow.

MEAN Stack

The MEAN Stack is a full-stack JavaScript open-source solution. It's made up of MongoDB, Express, Angular, and Node.js.

The idea behind it is to solve the common issues with connecting those frameworks, build a robust framework to support daily development needs, and help developers use better practices while working with popular JavaScript components.

Back-end with Node.js

Node.js is built for handling asynchronous I/O while JavaScript has an event loop built-in for the client-side. This makes Node.js fast compared to other environments. However, the event-driven/callback approach makes Node.js difficult to learn and debug.

Node.js includes modules such as Mongoose, which is a MongoDB object modeling, and the Express web application framework. Through Node modules, abstraction can be achieved, which reduces the overall complexity of the MEAN stack.

Back-end with Express Framework

Express is a minimalist and unopinionated application framework for Node.js. It is a layer on top of Node.js that is feature-rich for web and mobile development without hiding any Node.js functionality.

Front-end with Angular

Angular is a web development platform built in TypeScript that provides developers with robust tools for creating the client side of web applications.

It allows development of single-page web applications where content changes dynamically based on user behavior and preferences. It features dependency injection to ensure that whenever a component is changed, other components related to it will be changed automatically.

Database with MongoDB

MongoDB is a NoSQL database which stores data in BJSON (Binary JavaScript Object Notation).

MongoDB became the de facto standard database for Node.js applications to fulfill the "JavaScript everywhere" paradigm using JSON (JavaScript Object Notation) to transmit data across different tiers (front-end, back-end, and the database).

Now that we've gotten those basics out of the way, let's look at these diagrams.

Restaurant Analogy

As I wanted to tackle the steep learning curve, I chose a restaurant analogy to let the user understand and retain the process for request and response in a full stack application.

The customer (end-user) requests their order through the waiter (controller), and the waiter hands over the request to the person at the order window (service factory).

These three components makes up the front-end server. The service factory will be the one to communicate with the cook (controller) in the back-end. The cook will then grab the necessary ingredients (data) in the fridge (database server).

The fridge will be able to provide the necessary material (data) to the cook in the back-end. The cook can now process that data and send back to the service factory of the front-end.

The controller (waiter) will hand-over the prepared meal to the customer (user). The customer will now be able to consume the meal (data).

Process View using Sequence Diagram

Who uses it or what it shows:

• Integrators
• Performance
• Scalability

In the process view, I show the front-end server and back-end server separately at first and then connect them together with the database server.

In the first example, an Angular application was deployed with hard-coded JSON in a service.ts file (located in the Service Factory).

The Angular application can communicate with third-party APIs to obtain data and display it to the user.

In our back-end, the Node.js application example starts with a hard-coded JSON that can be processed and used as a response.

This back-end can be connected to third-party APIs or a database server to obtain the JSON, process it, and send it back to the requester.

With the front-end server, back-end server, and database server processes explained, I show the combination of these three servers below:

When an HTTP request is made, the front-end will be triggered and Angular will pick up the request. The request will be passed internally in Angular with Route sending a request for the view to View/Template.

View/Template will request the Controller. The Controller will then create an HTTP request to a RESTful (Representational state transfer) endpoint to the Server Side, which is Express/Node.js. The request will then be passed internally with Express/Node.js from its Route to the Controller/Model.

The Controller/Model will make a request through the Mongoose ODM to interact with the Database Server that has MongoDB. MongoDB will process the request and respond the callback to Express/Node.js.

Express/Node.js sends a JSON response to the Angular Controller. The Angular Controller would then respond with a view.

Scenario View using Sequence Diagram

Who uses it or what it shows:

• Describe interactions between objects and between processes

The scenario described above involves a user accessing a book store application. When the user enters the URL, JavaScript will be run and will hit the router of the front-end server, which is the AppRoutingModule. The AppRoutingModule will call the BooksComponent, which will load fetchBooks as its dependency injection.

fetchBooks will then create an HTTP request to the back-end server that has a router, controller, and model to process the request and query the database server.

The database server processes the query, and with the back-end server waiting, will grab the data and sent it back to the front-end server as a JSON response.

The front-end will now have the data and the template view to show to the user.

Physical View using Deployment Diagram

Who uses it and what it shows:

• System engineer
• Topology
• Communications

The deployment diagram shows 3 servers: front-end, back-end, and database. In the front-end, we require the browser as Angular applications are browser-based web applications.

The back-end server hosts our Node.js with Express on top of Node.js. In Express, we have the application and Mongoose on top of it. Express will handle the communication on both front-end and database. The database server only includes MongoDB. It uses JSON to communicate across servers.

In our first build of the MEAN Stack, we’ll be deploying locally using our local machine (localhost) to deploy the front-end server, back-end server, and database server.

We’ll be using the following default ports: Angular - port 4200, Node.js/Express – port 3000, and MongoDB – port 27017.

The diagram below shows the full stack web application in UML notation.

Moving further to actual production, the thing to migrate to the cloud is our database. For MongoDB, I chose MongoDB Atlas as the cloud solution.

The last step to production deployment is uploading our front-end code to Amazon S3 and uploading the back-end in an EC2 instance with AWS. They would all communicate to each other with HTTP / HTTPS endpoints.

Here's another diagram to show our production deployment without using UML notation.

Development View using Package Diagram

Who uses it and what it shows:

• Programmers
• Software Management

The package view of the Angular application shows that every Angular Component is imported in the AppModule. AppModule and AppRoutingModule are dependent on BooksComponent. The BooksComponent is dependent on BookDetailComponentDialog and ApiService.

The package view of the Node.js application shows that all CRUD operations (controllers) such as fetch all books, fetch a book, update a book, and delete a book are imported by the app. Also, all the CRUD operations logic resides in the model book.

Logical View using Class Diagram

Who uses it and what it shows:

• End-user
• Functionality

The book store application only showcased a single class called Book. The class members are: title, isbn, author, picture and price. The methods are: addBook, fetchBooks, fetchBook, updateBook, and deleteBook.

The model Book’s structure in JSON format.

Here are some videos for the diagrams:

Documentation available on my GitHub:

Find me on LinkedIn. =)

Front-end developers might know this game already: you type “top JavaScript frameworks” into Google and you get so many JavaScript frameworks from which to choose.

There are always more choices for JavaScript frameworks. And it's always tough to choose a JavaScript framework for front-end development.

So, what are front-end developers looking for in their tech stacks? As a full-time developer, I know it comes down to rapid development and easy-to-make UIs.

Rather than try to be decisive, we, 450+ developers at ValueCoders software development company, voted and shortlisted a few of the best JavaScript frameworks.

Our Vote Goes to React

I was not surprised to see this. Most of our developers voted for React as one of the best JavaScript frameworks. There have been plenty of projects along the way that our front-end developers are handling that highlighted the strengths of the JS framework. React provides a combination of the following:

• Reusable components
• Synchronization of state and view
• Routing and template system

Our developers implement front-end logic by relying heavily on React. At the same time, I was surprised by how simple it was to create applications with React.

Here is an Overview of Our App

The application is simple. It’s a studio management app for music teachers that helps them focus more on their teaching and less on the management of their music studio.

The key challenge was creating one ‘Activity Dashboard’ for teachers where they could manage all their students' activities and track their progress over time. We overcame this challenge by using Redux libraries to build the platform. We built a teacher’s studio from where they could manage their students' progress, showcase new music lessons, chat with them, compare students music playing with live music, and provide them feedback.

So, this is my experience with React JS. But many would argue that Vue is one of the best front-end JavaScript frameworks with many useful tools.

Front-end developers are the ones deciding which JavaScript framework will do the job. In doing so, they face a lot of challenges because they need to decide what they’ve always needed. Often, we have to choose a JavaScript framework now, not after a week of research. In that case, most developers go with what they know. But maybe the stacks you’re familiar with are no longer cutting it in terms of performance.

Even just choosing among Angular, React, an Vue, it is difficult for new developers. Rather than making it more exhaustive for you, here is the list of the top JavaScript frameworks for front-end developers.

The Big 5 JavaScript Frameworks

The five JavaScript frameworks that currently dominate the market in terms of popularity and usage are:

• React
• Vue
• Angular
• Ember
• Backbone.js.

They each have large communities. If you are a front-end developer or are going to start your new project on front-end technologies, these five are your best bets. Here’s a look at the npm trends over the last six months.

1. React

React is the definite leader in the JS world. This JavaScript framework uses a reactive approach and also introduces many of its own concepts for front-end web development.

To use React , you’ll have to learn to use a plethora of additional tools to reach high flexibility in front-end development. For example, here's a less exhaustive list of libraries you can use with React: Redux, MobX, Fluxy, Fluxible, or RefluxJS. React can also be used with jQuery AJAX, fetch API, Superagent, and Axios.

Concurrent Mode

React is constantly working towards improving concurrent mode. To take this forward, React Conf 2019 wrapped up last month where the React team talked about improving Concurrent Mode and the Suspense model. Both the features make React apps more responsive by rendering trees without blocking threads. This allows React to focus on high priority tasks like responding to user input.

Suspense

React also introduced Suspense to improve the developer’s experience when handling asynchronous data fetching in React apps. In short, the new update to Suspense lets the component wait until a condition is met.

Hooks are another important update to React 16.8. React hooks lets you use every important feature of React – server-side rendering, accessibility, concurrent mode, and suspense – all without writing a class.

React applications are divided into multiple components that contain both business logic and HTML markup functions. To improve the communication between components, developers can use either Flux or a similar JavaScript library.

React also introduced objects, like state and props. With the state and props objects, you can simply pass data from a component to the layout or from a parent component to a child component.

Introduction to the React ecosystem:

• The React library plus React router for implementing routes.
• React-DOM for DOM manipulation.
• React developer tools for Firefox and Chrome browsers.
• React JSX, a markup language that mixes HTML into JavaScript.
• React Create App command line interface to set up a React project.
• Redux and Axios libraries to organize communication with the backend team.

No doubt, React is one of the most popular JavaScript frameworks. And, I think that React can be your first choice for creating advanced-grade apps.

2. Angular 2 to Angular 9

Angular 9 will mark a turning point revealed by the Angular team at the recent AngularConnect 2019. According to the update, the team is planning to make the Angular Ivy compiler available for all apps. The main benefit of Angular Ivy is that it is able to reduce the size of applications.

Angular today has become very advanced and modular to use for front-end development. Previously you could insert a link to the AngularJS library in the main HTML file, but now you can do the same by installing separate modules.

Angular's flexibility is commendable. That’s why Angular's 1.x versions are still in demand. However, many developers currently rely on Angular 2+ because of its MVC architecture which has changed substantially to a component based architecture.

Angular has a couple of additional challenges. You're almost obliged to use TypeScript to ensure type safety in Angular apps. TypeScript makes the Angular 2+ framework not so pleasant to work with.

Angular’s ecosystem is comprised of:

• For quick project setup, Angular's command line interface is helpful.
• Developers will get a set of modules for Angular projects: @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, and @angular/upgrade.
• Angular uses Zone.js a JavaScript library to implement zones in Angular apps.
• TypeScript and CoffeeScript both can be used with Angular.
• For communication with server-side apps, Angular uses RxJS and the Observable pattern.
• Angular Augury for debugging Angular apps.
• Angular Universal for creating server-side apps with Angular.

Angular2 is a complete JavaScript framework with all the tools a modern front-end developer needs. You can choose Angular if you don’t like to work with additional libraries as with React.

3. Vue

The Snyk JavaScript framework report for 2019 is out. The report mainly focused on security risks in both React and Angular.

The concept of Vue has been taken from Angular and React, but Vue is better in many ways. I’ll talk about its features, but first check out what the Synk report says about Vue's front-end security. Vue has been downloaded 40 million times this year and records only four direct vulnerabilities. All of them have been fixed.

For any front-end developer unfamiliar with Vue, let’s clarify several points.

With Vue you store component logic and layouts along with stylesheets in one file. This is the same way React works, without stylesheets. To let components talk to each other, Vue uses the props and state objects. This approach also existed in React before Vue adopted it.

Similar to Angular, Vue wants you to mix HTML layouts with JavaScript. You have to use Vue directives such as v-bind or v-if to interpolate values from the component logic to templates.

One of the reasons why Vue is worth considering instead of React is because of the Redux library that’s often used in large-scale React applications. As explained in the React section, when a React+Redux app grows bigger, you’ll spend a lot of time applying small changes to multiple files instead of actually working on features. The Vuex library – a Flux-like state management tool designed for Vue – seems less unwieldy than Redux.

If you're choosing between Vue and Angular, the reasons to opt for Vue over Angular can be reduced to the following: Angular is an over-complicated, full-fledged framework with a restrictive nature; Vue is much simpler and less restrictive than Angular.

Another advantage of Vue over Angular and React is that you don’t have to learn JavaScript once more.

An introduction to the VueJS ecosystem:

• Vuex comes with a dedicated library for application management.
• Vuex is similar to the concept of Flux.
• You will get Vue-loader for components and vue.js devtools for Chrome and Firefox browsers.
• Vue-resource and Axios tools for communication between Vue and the backend source.
• Vue.js support Nuxt.js for creating server-side applications with Vue; Nuxt.js is basically a competitor to Angular Universal.
• You will get a Weex JavaScript library with Vue syntax that is used for mobile app development.

Vue is excellent in terms of its workflow to other frameworks. I might opt for Vue because it’s less complicated than React and Angular JS and a great choice for developing enterprise-level apps.

4. Ember

Ember 3.13 released this year with some new updates and features. Ember is just like Backbone and AngularJS, and is also one of the oldest JavaScript frameworks. But with the new update, Ember 3.13 is compatible with new bug fixes, performance improvements, and deprecation. Tracked property updates have also been introduced that allow simpler ways of tracking state change in the ergonomic system of Ember apps.

Ember has a relatively intricate architecture, which will allow you to quickly build huge client-side applications. It realizes a typical MVC JavaScript framework, and Ember’s architecture comprises the following parts: adapters, components, controllers, helpers, models, routes, services, templates, utils, and addons.

One of Ember’s best features is its command line interface tool. The Ember CLI helps front-end developers be highly productive and lets them complete projects on time. You can not only create new projects with ready setups, but you can also create controllers, components, and project files using automatic generation.

The EmberJS ecosystem is comprised of:

• Ember CLI tool for quick prototyping and managing dependencies.
• Ember server built into the framework for the development of apps.
• You'll get Ember.js library and Ember Data for data management.
• Handlebars template engine for Ember applications.
• QUnit testing framework for Ember.
• Ember Inspector development tool for Chrome and Firefox browsers.
• Ember Observer for public storage and Ember addons to implement generic functionalities.

Although Ember is underrated, it's perfect for creating complex client-side apps.

5. Backbone.js

Backbone is a JavaScript framework based on the MVC architecture. In Backbone.js, the View of MVC helps implement component logic similarly to a Controller. Backbone view can use engines like Mustache and Underscore.js.

Backbone is an easy to use JavaScript framework that allows for quick development of single page applications. To use Backbone.js to the fullest extent, you’ll have to choose tools: Chaplin, Marionette, Thorax, Handlebars or Mustache, and so on.

If you need to design an app that has different types of users, Backbone collections (arrays) can be used here to separate the models. Backbone.Events can be used with Backbone models, collections, routes, and views.

Introducing the BackboneJS ecosystem:

• The Backbone library consists of events, models, collections, views, and router.
• Underscore.js, a JavaScript library with helper functions that you can use to write cross-browser JavaScript.
• You can use template engines such as Mustache and jQuery-tmpl.
• BackPlug online repository with a lot of ready solutions for Backbone-based apps.
• Backbone generator CLI for building Backbone apps.
• Marionette, Thorax, and Chaplin JavaScript libraries to develop an advanced architecture for Backbone apps.

Backbone.js is a perfect choice for front-end and back-end development as it supports REST APIs that are used to synchronize the front-end and back-end.

Need More Help?

All front-end developers out there, if you need help with JavaScript frameworks, feel free to get in touch. Or, you can also contact us to hire ReactJS developers, Vue developers, or Angular developers.

_Or, leave me a note or Tweet out to me._

Remember this article gives you a general roadmap on JavaScript frameworks. Tell me if I have missed something, and we can discuss that. I hope it will also help achieve your front-end development goals.

A framework’s command line interface, or CLI, is the preferred method to scaffold a project. It provides a starting point of files, folders, and configuration. This scaffolding also provides a development and build process. A development process provides a way to see updates occurring as you edit your project. The build process creates the final version of files to be used in production.

Installing and running Vue.js (“Vue”) can be done with a script tag that points to the Vue content delivery network (CDN). No build or development process is necessary. But, if you use Vue single-file components (SFCs), you need to convert those files into something the browser can understand. The files need to be converted to Hyper-Text Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS). In this case, a development and build process must be used.

Instead of relying on the Vue CLI to scaffold our project and provide us with a development and build process, we will build a project from scratch. We will create our own development and build process using Webpack.

What is Webpack?

Webpack is a module bundler. It merges code from multiple files into one. Before Webpack, the user included a script tag for each JavaScript file. Although browsers are slowly supporting ES6 modules, Webpack continues to be the preferred way to build modular code.

Besides being a module bundler, Webpack can also transform code. For example, Webpack can take modern JavaScript (ECMAScript 6+) and convert it into ECMAScript 5. While Webpack bundles the code itself, it transforms the code with loaders and plugins. Think of loaders and plugins as add-ons for Webpack.

Webpack and Vue

Single-file components allow us to build an entire component (structure, style, and function) in one file. And, most code editors provide syntax highlighting and linting for these SFCs.

_[Vue Single File Component](https://vuejs.org/v2/guide/single-file-components.html" rel="noopener" target="blank" title="): notice the .vue extension.

Notice the file ends with .vue. The browser doesn’t know what to do with that extension. Webpack, through the use of loaders and plugins, transforms this file into the HTML, CSS, and JS the browser can consume.

The Project: Build a Hello World Vue Application Using Single-File Components.

Step 1: Create the project structure

The most basic Vue project will include an HTML, JavaScript, and a Vue file (the file ending in .vue). We will place these files in a folder called src. The source folder will help us separate the code we are writing from the code Webpack will eventually build.

Since we will be using Webpack, we need a Webpack configuration file.

Additionally, we will use a compiler called Babel. Babel allows us to write ES6 code which it then compiles into ES5. Babel is one of those “add-on features” for Webpack. Babel also needs a configuration file.

Finally, since we are using NPM, we will also have a node_modules folder and a package.json file. Those will be created automatically when we initialize our project as an NPM project and begin installing our dependencies.

To get started, create a folder called hello-world. From the command line, change to that directory and run npm init. Follow the on-screen prompts to create the project. Then, create the rest of the folders (except for node_modules) as described above. Your project structure should look like this:

The simplest Vue SFC project structure.

Step 2: Install the dependencies

Here is a quick rundown of the dependencies we are using:

vue: The JavaScript framework

vue-loader and vue-template-compiler: Used to convert our Vue files into JavaScript.

webpack: The tool that will allow us to pass our code through some transformations and bundle it into one file.

webpack-cli: Needed to run the Webpack commands.

webpack-dev-server: Although not needed for our small project (since we won’t be making any HTTP requests), we will still “serve” our project from a development server.

babel-loader: Transform our ES6 code into ES5. (It needs help from the next two dependencies.)

@babel/core and @babel/preset-env: Babel by itself doesn’t do anything to your code. These two “add-ons” will allow us to transform our ES6 code into ES5 code.

css-loader: Takes the CSS we write in our .vue files or any CSS we might import into any of our JavaScript files and resolve the path to those files. In other words, figure out where the CSS is. This is another loader that by itself won’t do much. We need the next loader to actually do something with the CSS.

vue-style-loader: Take the CSS we got from our css-loader and inject it into our HTML file. This will create and inject a style tag in the head of our HTML document.

html-webpack-plugin: Take our index.html and inject our bundled JavaScript file in the head. Then, copy this file into the dist folder.

rimraf: Allows us, from the command line, to delete files. This will come in handy when we build our project multiple times. We will use this to delete any old builds.

Let’s install these dependencies now. From the command line, run:

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin rimraf -D

Note: The “-D” at the end marks each dependency as a development dependency in our package.json. We are bundling all dependencies in one file, so, for our small project, we have no production dependencies.

Step 3: Create the files (Except for our Webpack configuration file).

<template>
  <div id="app">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World',
    };
  },
};
</script>

<style>
#app {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: blue;
}
</style>

<html>
  <head>
    <title>Vue Hello World</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

module.exports = {
  presets: ['@babel/preset-env'],
}

Up to this point, nothing should look too foreign. I’ve kept each file very basic. I’ve only added minimal CSS and JS to see our workflow in action.

Step 4: Instructing Webpack what to do

All the configuration Webpack needs access to is now present. We need to do two final things: Tell Webpack what to do and run Webpack.

Below is the Webpack configuration file (webpack.config.js). Create this file in the projects root directory. Line-by-line we’ll discuss what is occurring.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
  ]
};

Lines 1 and 2: We are importing the two plugins we use below. Notice, our loaders don’t normally need to be imported, just our plugins. And in our case, the vue-loader (which we use in line 9) also needs a plugin to work (however, Babel, for example, does not).

Line 4: We export our configuration as an object. This gives us access to it when we run the Webpack commands.

Line 5: This is our entry module. Webpack needs a place to start. It looks in our main.js file and then starts to comb through our code from that point.

Line 6 and 7: This is the module object. Here, we primarily pass in an array of rules. Each rule tells Webpack how to handle certain files. So, while Webpack uses the entry point of main.js to start combing through our code, it uses the rules to transform our code.

Line 8 (rule): This rule instructs Webpack to use the babel-loader on any files which end with .js. Remember, Babel will transform ES6+ to ES5.

Line 9 (rule): This rule instructs Webpack to use vue-loader (and don’t forget the associated plugin on line 17) to transform our .vue files into JavaScript.

Line 10 (rule): Sometimes we want to pass a file through two loaders. Counterintuitively, Webpack will pass the file from right to left instead of left to right. Here we are using two loaders and saying to Webpack: “get my CSS from my Vue file or any JavaScript files(css-loader) and inject it into my HTML as a style tag (vue-style-loader).

Lines 11 and 12: Close out our rules array and module object.

Lines 13: Create a plugins array. Here we will add the two plugins we need.

Line: 14 -16 (plugin): The HtmlWebpackPlugin takes the location of our index.html file and adds our bundled JavaScript file to it via a script tag. This plugin will also copy the HTML file to our distribution folder when we build our project.

Line 17 (plugin): The VueLoaderPlugin works with our vue-loader to parse our .vue files.

Line 18: Close out the plugins array.

Line 19: Close out the Webpack object that we are exporting.

Step 5: Setting up our package.json file so we can run Webpack

Our configuration is complete, now we want to see our application. Ideally, as we make changes to our application, the browser would update automatically. This is possible with webpack-dev-server.

Delete the test script in our package.json file, and replace it with a script to serve our application:

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "serve": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "rimraf": "^2.6.2",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {}
}

The name of this command is your choice. I chose to call mine serve since we will be serving our application.

From our terminal or command line, we can run npm run serve and that in turn will run webpack-dev-server --mode development .

The --mode development is what’s called a flag or option. We haven’t talked about this, but it essentially instructs Webpack that you are in development mode. We can also pass in --mode production which we will do when we build our project. These aren’t necessarily required for Webpack to work. Without these, you will get a warning message telling you to provide a mode when you run Webpack .

I say “necessarily required” because Webpack will minimize our code in production mode but not in development. So, don’t think those commands don’t do anything–they do.

Let’s run npm run serve and see what happens.

When we run npm run serve we get some output in our terminal. And, if everything goes well:

And if we scroll up a bit:

Point your browser to http://localhost:8080. You will see your Blue Hello World message in Roboto font.

Now, let’s update the project and change the message to Hello Universe. Notice that the webpage refreshes automatically. That’s great, right? Can you think of a downside?

Let’s change the application just a bit and include an input which we will bind a variable to (with v-model). We will output the variable in an <h2>tag below the input. I’ve also updated the styling section to style the message now. Our App.vue file should look like this:

<template>
  <div id="app">
    <input
      v-model="message"
      type="text">
      <h2 class="message">{{ message }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world!',
    };
  },
};
</script>

<style>
.message {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: blue;
}
</style>

When we serve our application, we will have an input with a message of Hello World below it. The input is bound to the message variable, so as we type, we change the <h2> content. Go ahead, type into the input to change the <h2>content.

Now go back to your editor, and below the <h2>tag, add the following:

<h3>Some Other Message</h3>

Save your App.vue and watch what happens.

The h2 we just updated by typing in our input reverted back to Hello World. This is because the browser actually refreshes, and the script tag and page are loaded again. In other words, we were not able to maintain the state of our application. This may not seem like a big deal, but as you are testing your application and adding data to it, it will be frustrating if your app “resets” every time. Fortunately, Webpack offers us a solution called Hot Module Replacement.

The hot module replacement is a plugin provided by Webpack itself. Up until this point, we have not used the Webpack object itself in our configuration file. However, we will now import Webpack so we can access the plugin.

In addition to the plugin, we will pass one additional option to Webpack, the devServer option. In that option, we will set hot to true. Also, we will make an (optional) update to our build workflow: We will open the browser window automatically when we run npm run serve. We do this by setting open to true which is also inside the devServer option.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  devServer: {
    open: true,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ]
};

Notice that we’ve imported Webpack so we could access the hotModuleReplacementPlugin. We’ve added that to the plugins array, and then told Webpack to use it with hot: true. We open the browser window automatically when we serve the application with open: true.

Run npm run serve:

The browser window should open, and if you open your dev tools, you should notice a slight change in the output. It now tells us hot module replacement is enabled. Let’s type in our input to change the <h2> content. Then, change theh3 tag to read: One More Message.

Save your file and notice what happens.

The browser doesn't refresh, but our <h3>change is reflected! The message we typed in the input remains, but the h3 updates. This allows our application to keep it’s state while we edit it.

Step 7: Building our project

So far, we’ve served our application. But, what if we want to build our application so we can distribute it?

If you noticed, when we serve our application, no files are created. Webpack creates a version of these files that only exist in temporary memory. If we want to distribute our Hello World app to our client, we need to build the project.

This is very simple. Just like before, we will create a script in our package.json file to tell Webpack to build our project. We will use webpack as the command instead of webpack-dev-server. We will pass in the --mode production flag as well.

We will also use the rimraf package first to delete any previous builds we may have. We do this simply by rimraf dist.

_dist_ is the folder Webpack will automatically create when it builds our project. “Dist” is short for distribution–i.e. we are “distributing” our applications code.

The rimraf dist command is telling the rimraf package to delete the dist directory. Make sure you don’t rimraf src by accident!

Webpack also offers a plugin that will accomplish this cleaning process called clean-webpack-plugin. I chose dist show an alternative way.

Our package.json file should look like this:

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "clean": "rimraf dist",
    "build": "npm run clean && webpack --mode production",
    "serve": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "rimraf": "^2.6.2",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {}
}

There are three things to notice:

1. I’ve created a separate clean script so we can run it independently of our build script.

2. npm run build will call the independent clean script we’ve created.

3. I have && between npm run clean and webpack. This instruction says: “run npm run clean first, then run webpack”.

Let’s build the project.

npm run build

Webpack creates a dist directory, and our code is inside. Since our code makes no HTTP requests, we can simply open our index.html file in our browser and it will work as expected.

If we had code that was making HTTP requests, we would run into some cross-origin errors as we made those requests. We would need to run that project from a server for it to work.

Let’s examine the index.html that Webpack created in the browser and the code editor.

R

If we open it in our editor or take a look at the source code in our dev tools you will see Webpack injected the script tag. In our editor though, you won’t see the styles because the style tag is injected dynamically at runtime with JavaScript!

Also, notice our development console information is no longer present. This is because we passed the --production flag to Webpack.

Conclusion

Understanding the build process behind the frameworks you use will help you to better understand the framework itself. Take some time to try to build an Angular, React or another Vue Project without the use of the respective CLIs. Or, just build a basic three-file site (index.html, styles.css, and app.js), but use Webpack to serve and build a production version.

Thanks for reading!

Found this helpful? I write about practical automation, productivity systems, and building smarter workflows — without the jargon. Visit me at brandonwoz.com.

The title may lead you to think that this post is another ranting post about the downside of a “Single Page Application”. It is more about shedding some light on the performance perspective to keep in mind while designing the SPA. Especially if your SPA consumes APIs from different domain services.

If you are designing an SPA which consumes the API from the same domain of the SPA, then great. You should skip this article if your SPA only pulls from the API on the same domain.

Most SPAs involve “microservices.” They consume different endpoints of services serving by different domains within the SPA. This adds resilience, fault tolerance, and an improved user experience of our product. Multiple domain requests become inevitable until and unless we strictly adhere to the same domain app API Gateway — Microservices Pattern for our SPA.

SPA + Cors does not always reduce the latency.

Let’s Imagine we have a GET API /users/report/:id served from domain api.example.com. Our SPA is served from spa.example.com. The :id means its a value that can change for every request.

Can you guess the issue with the above API design with respect to CORS (Cross-Origin Resource Sharing) and its impact on the performance of our SPA?

Here’s a brief Introduction of CORS from MDN:

CORS is all good while it’s a simple request that doesn’t trigger a CORS preflight. But most often we make requests that are not a “ simple request.”

This is due to the fact that we need to send a header that is not CORS-safelisted-request-header. An example header is Authorization, x-corelation-id. Frequently our Content-Type header value is application/json. This is not an allowed value for the [Content-Type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) header for cors-safelisted-request-header.

If our api.example.com server accepts content-type of application/json, our SPA domain spa.example.com will first send an HTTP request by the [OPTIONS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS) method. It is sent to the resource /users/report/12345 on the other domain api.example.com. To determine whether the actual request is safe to send, the option is sent preflighted. Cross-site requests are always preflighted like this, since they may have implications for user data.

It’s the job of api.example.com server to let the other domain spa.example.com know it’s safe to send the data. You might have done something similar to this for CORS inside your Application.

Allowing CORS on Express.js Server

Once the api.example.com server sends the proper response from “OPTIONS” method to other domain spa.example.com then only the actual data with the request you were trying to make is done.

So to access a resource api.example.com/users/report/12345 two actual requests were performed.

You might say yes. We can use the [Access-Control-Max-Age header](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests#Access-Control-Max-Age) to cache the results of a preflight request. The next time we access the resource api.example.com/users/report/12345 from spa.example.com there is no preflight request.

Yes, that’s true, but then remember the title — The terrible performance cost of CORS requests on the single-page application (SPA). This comes from the API that we’re are consuming and the way it’s been designed. In our example, we designed our API /users/report/:id, where :id means its a value that can change.

The way preflight cache works is per URL, not just the origin. This means that any change in the path (which includes query parameters) warrants another preflight request.

So in our case, to access resource api.example.com/users/report/12345 and api.example.com/users/report/123987, it will trigger four requests from our SPA in total.

If you have a slow network, this could be a huge setback. Especially when an OPTIONS request takes 2 seconds to respond, and another 2 for the data.

Now imagine your SPA application making millions of such requests for different domains. It will have a terrible impact on your SPA’s performance. You’re doubling the latency of every request.

SPAs are great in their own domain. But for consuming different domains they come with their own cost. If the API is poorly designed, the latency issues of your SPA can hurt more than the benefits they provide.

There is no solution or technology that is wholly good or bad. Knowing its shortcoming and what it takes to make it work are what matters. This is what differentiates your Application from the others.

In this article, we are going to create a Single Page Application (SPA) using Razor pages in Blazor, with the help of the Entity Framework Core database first approach.

Introduction

Single Page Application (SPAs) are web applications that load a single HTML page, and dynamically update that page as the user interacts with the app. We will be creating a sample Employee Record Management System and perform CRUD operations on it.

We will be using Visual Studio 2017 and SQL Server 2014.

Take a look at the final application.

Prerequisites

• install .NET Core 2.1 Preview 2 SDK from here
• install Visual Studio 2017 v15.7 or above from here
• install ASP.NET Core Blazor Language Services extension from here
• SQL Server 2008 or above

The Blazor framework is not supported by versions below Visual Studio 2017 v15.7.

Source code

Get the source code from GitHub.

Creating the table

We will be using a DB table to store all the records of employees.

Open SQL Server and use the following script to create theEmployee table.

CREATE TABLE Employee (  EmployeeID int IDENTITY(1,1) PRIMARY KEY,  Name varchar(20) NOT NULL ,  City varchar(20) NOT NULL ,  Department varchar(20) NOT NULL ,  Gender varchar(6) NOT NULL   )

Create the Blazor web application

Open Visual Studio and select “File” > “New” > “Project”.

After selecting the project, a “New Project” dialog will open. In the left panel, select “.NET Core” inside the Visual C# menu. Then, select “ASP.NET Core Web Application” from available project types. Put the name of the project as “BlazorSPA” and press “OK”.

After clicking on “OK”, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns. Then, select the “Blazor (ASP.NET Core hosted)” template and press “OK”.

Now our Blazor solution will be created. You can observe the folder structure in Solution Explorer as shown in the below image.

You can observe that we have three project files created inside this solution.

1. BlazorSPA.Client — has the client side code and contains the pages that will be rendered on the browser.
2. BlazorSPA.Server — has the server side codes such as DB-related operations and the web API.
3. BlazorSPA.Shared — contains the shared code that can be accessed by both client and server. It contains our model classes.

Scaffolding the model to the application

We are using the Entity Framework core database first approach to create our models. We will create our model class in the “BlazorSPA.Shared” project so that it can be accessible to both client and server project.

Navigate to “Tools” > “NuGet Package Manager” > “Package Manager Console”. Select “BlazorSPA.Shared” from the “Default project” dropdown. Refer to the image below:

First, we will install the package for the database provider that we are targeting, which is SQL Server in this case. Run the following command:

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Since we are using Entity Framework Tools to create a model from the existing database, we will install the tools package as well. Run the following command:

Install-Package Microsoft.EntityFrameworkCore.Tools

After you have installed both the packages, we will scaffold our model from the database tables using the following command:

Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Employee

Do not forget to put your own connection string (inside “”). After this command is executed successfully, you can observe a “Models” folder has been created. It contains two class files, “myTestDBContext.cs” and “Employee.cs”. Hence, we have successfully scaffolded our models using the Entity Framework core database first approach.

At this point in time, the Models folder will have the following structure:

Creating the data access layer for the application

Right-click on the “BlazorSPA.Server” project and then select “Add” > “New Folder” and name the folder as “DataAccess”. We will be adding our class to handle database-related operations inside this folder only.

Right click on the “DataAccess” folder and select “Add” > “Class”. Name your class “EmployeeDataAccessLayer.cs”.

Open “EmployeeDataAccessLayer.cs” and put the following code into it:

using BlazorSPA.Shared.Models;using Microsoft.EntityFrameworkCore;using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;namespace BlazorSPA.Server.DataAccess{    public class EmployeeDataAccessLayer    {        myTestDBContext db = new myTestDBContext();        //To Get all employees details           public IEnumerable<Employee> GetAllEmployees()        {            try            {                return db.Employee.ToList();            }            catch            {                throw;            }        }        //To Add new employee record             public void AddEmployee(Employee employee)        {            try            {                db.Employee.Add(employee);                db.SaveChanges();            }            catch            {                throw;            }        }        //To Update the records of a particluar employee            public void UpdateEmployee(Employee employee)        {            try            {                db.Entry(employee).State = EntityState.Modified;                db.SaveChanges();            }            catch            {                throw;            }        }        //Get the details of a particular employee            public Employee GetEmployeeData(int id)        {            try            {                Employee employee = db.Employee.Find(id);                return employee;            }            catch            {                throw;            }        }        //To Delete the record of a particular employee            public void DeleteEmployee(int id)        {            try            {                Employee emp = db.Employee.Find(id);                db.Employee.Remove(emp);                db.SaveChanges();            }            catch            {                throw;            }        }    }}

Here we have defined methods to handle database operations. GetAllEmployees will fetch all the employee data from the Employee Table. Similarly, AddEmployee will create a new employee record, and UpdateEmployee will update the record of an existing employee. GetEmployeeData will fetch the record of the employee corresponding to the employee ID passed to it, and DeleteEmployee will delete the employee record corresponding to the employee ID passed to it.

Adding the web API controller to the application

Right click on the “BlazorSPA.Server/Controllers” folder and select “Add” > “New Item”. An “Add New Item” dialog box will open. Select “ASP.NET” from the left panel, then select “API Controller Class” from the templates panel, and put the name as “EmployeeController.cs”. Click “Add”.

This will create our API EmployeeController class.

We will call the methods of theEmployeeDataAccessLayer class to fetch data and pass on the data to the client side.

Open “EmployeeController.cs” file and put the following code into it:

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using BlazorSPA.Server.DataAccess;using BlazorSPA.Shared.Models;using Microsoft.AspNetCore.Mvc;namespace BlazorSPA.Server.Controllers{    public class EmployeeController : Controller    {        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();        [HttpGet]        [Route("api/Employee/Index")]        public IEnumerable<Employee> Index()        {            return objemployee.GetAllEmployees();        }        [HttpPost]        [Route("api/Employee/Create")]        public void Create([FromBody] Employee employee)        {            if (ModelState.IsValid)                objemployee.AddEmployee(employee);        }        [HttpGet]        [Route("api/Employee/Details/{id}")]        public Employee Details(int id)        {            return objemployee.GetEmployeeData(id);        }        [HttpPut]        [Route("api/Employee/Edit")]        public void Edit([FromBody]Employee employee)        {            if (ModelState.IsValid)                objemployee.UpdateEmployee(employee);        }        [HttpDelete]        [Route("api/Employee/Delete/{id}")]        public void Delete(int id)        {            objemployee.DeleteEmployee(id);        }    }}

At this point of time, our “BlazorSPA.Server” project has the following structure.

We are done with our backend logic. Therefore, we will now proceed to code our client side.

Adding the Razor page to the application

We will add the Razor page into the “BlazorSPA.Client/Pages” folder. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application but, for the sake of this tutorial, we will delete the “fetchdata” and “counter” pages from the “BlazorSPA.Client/Pages” folder.

Right click on the “BlazorSPA.Client/Pages” folder and then select “Add” > “New Item”. An “Add New Item” dialog box will open. Select “ASP.NET Core” from the left panel, then select “Razor Page” from the templates panel and name it “EmployeeData.cshtml”. Click “Add”.

This will add an “EmployeeData.cshtml” page to our “BlazorSPA.Client/Pages” folder. This Razor page will have two files, “EmployeeData.cshtml” and _“EmployeeData.cshtml.cs”._

Now we will add code to these pages.

EmployeeData.cshtml.cs

Open “EmployeeData.cshtml.cs” and put the following code into it:

using System;using System.Collections.Generic;using System.Linq;using System.Net.Http;using System.Threading.Tasks;using BlazorSPA.Shared.Models;using Microsoft.AspNetCore.Blazor;using Microsoft.AspNetCore.Blazor.Components;using Microsoft.AspNetCore.Blazor.Services;namespace BlazorSPA.Client.Pages{    public class EmployeeDataModel : BlazorComponent    {        [Inject]        protected HttpClient Http { get; set; }        [Inject]        protected IUriHelper UriHelper { get; set; }        [Parameter]        protected string paramEmpID { get; set; } = "0";        [Parameter]        protected string action { get; set; }        protected List<Employee> empList = new List<Employee>();        protected Employee emp = new Employee();        protected string title { get; set; }        protected override async Task OnParametersSetAsync()        {            if (action == "fetch")            {                await FetchEmployee();                this.StateHasChanged();            }            else if (action == "create")            {                title = "Add Employee";                emp = new Employee();            }            else if (paramEmpID != "0")            {                if (action == "edit")                {                    title = "Edit Employee";                }                else if (action == "delete")                {                    title = "Delete Employee";                }                emp = await Http.GetJsonAsync<Employee>("/api/Employee/Details/" + Convert.ToInt32(paramEmpID));            }        }        protected async Task FetchEmployee()        {            title = "Employee Data";            empList = await Http.GetJsonAsync<List<Employee>>("api/Employee/Index");        }        protected async Task CreateEmployee()        {            if (emp.EmployeeId != 0)            {                await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp);            }            else            {                await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/Create", emp);            }            UriHelper.NavigateTo("/employee/fetch");        }        protected async Task DeleteEmployee()        {            await Http.DeleteAsync("api/Employee/Delete/" + Convert.ToInt32(paramEmpID));            UriHelper.NavigateTo("/employee/fetch");        }        protected void Cancel()        {            title = "Employee Data";            UriHelper.NavigateTo("/employee/fetch");        }    }}

Let us understand this code. We have defined a class EmployeeDataModel that will hold all our methods that we will use in the “EmployeeData.cshtml” page.

We are injecting the HttpClient service to enable web API call and the IUriHelper service to enable URL redirection. After this, we have defined our parameter attributes — paramEmpID and action. These parameters are used in “EmployeeData.cshtml” to define the routes for our page. We have also declared a property title to display the heading to specify the current action that is being performed on the page.

The OnParametersSetAsync method is invoked every time the URL parameters are set for the page. We will check the value of parameter action to identify the current operation on the page.

If the action is set to fetch, then we will invoke the FetchEmployee method to fetch the updated list of employees from the database and refresh the UI using the StateHasChanged method.

We will check if the action attribute of parameter is set to create, then we will set the title of the page to “Add Employee” and create a new object of type Employee. If the paramEmpID is not “0”, then it is either an edit action or a delete action. We will set the title property accordingly and then invoke our web API method to fetch the data for the employee ID as set in the paramEmpID property.

The method FetchEmployee will set the title to “Employee Data” and fetch all the employee data by invoking our web API method.

The CreateEmployee method will check if it is invoked to add a new employee record, or to edit an existing employee record. If the EmployeeId property is set, then it is an edit request and we will send a PUT request to the web API. If EmployeeId is not set, then it is a create request and we will send a POST request to web API. We will set the title property according to the corresponding value of action, and then invoke our web API method to fetch the data for the employee ID as set in the paramEmpID property.

The DeleteEmployee method will delete the employee record for the employee ID as set in the paramEmpID property. After deletion, the user is redirected to the “/employee/fetch” page.

In the Cancel method, we will set the title property to “Employee Data” and redirect the user to “/employee/fetch” page.

EmployeeData.cshtml

Open the “EmployeeData.cshtml” page and put the following code into it:

@page "/employee/{action}/{paramEmpID}"@page "/employee/{action}"@inherits EmployeeDataModel<h1>@title</h1>@if (action == "fetch"){    <p>        <a href="/employee/create">Create New</a>    </p>}@if (action == "create" || action == "edit"){    <form>        <table class="form-group">            <tr>                <td>                    <label for="Name" class="control-label">Name</label>                </td>                <td>                    <input type="text" class="form-control" bind="@emp.Name" />                </td>                <td width="20"> </td>                <td>                    <label for="Department" class="control-label">Department</label>                </td>                <td>                    <input type="text" class="form-control" bind="@emp.Department" />                </td>            </tr>            <tr>                <td>                    <label for="Gender" class="control-label">Gender</label>                </td>                <td>                    <select asp-for="Gender" class="form-control" bind="@emp.Gender">                        <option value="">-- Select Gender --</option>                        <option value="Male">Male</option>                        <option value="Female">Female</option>                    </select>                </td>                <td width="20"> </td>                <td>                    <label for="City" class="control-label">City</label>                </td>                <td>                    <input type="text" class="form-control" bind="@emp.City" />                </td>            </tr>            <tr>                <td></td>                <td>                    <input type="submit" class="btn btn-success" onclick="@(async () => await CreateEmployee())" style="width:220px;" value="Save" />                </td>                <td></td>                <td width="20"> </td>                <td>                    <input type="submit" class="btn btn-danger" onclick="@Cancel" style="width:220px;" value="Cancel" />                </td>            </tr>        </table>    </form>}else if (action == "delete"){    <div class="col-md-4">        <table class="table">            <tr>                <td>Name</td>                <td>@emp.Name</td>            </tr>            <tr>                <td>Gender</td>                <td>@emp.Gender</td>            </tr>            <tr>                <td>Department</td>                <td>@emp.Department</td>            </tr>            <tr>                <td>City</td>                <td>@emp.City</td>            </tr>        </table>        <div class="form-group">            <input type="submit" class="btn btn-danger" onclick="@(async () => await DeleteEmployee())" value="Delete" />            <input type="submit" value="Cancel" onclick="@Cancel" class="btn" />        </div>    </div>}@if (empList == null){    <p><em>Loading...</em></p>}else{    <table class='table'>        <thead>            <tr>                <th>ID</th>                <th>Name</th>                <th>Gender</th>                <th>Department</th>                <th>City</th>            </tr>        </thead>        <tbody>            @foreach (var emp in empList)            {                <tr>                    <td>@emp.EmployeeId</td>                    <td>@emp.Name</td>                    <td>@emp.Gender</td>                    <td>@emp.Department</td>                    <td>@emp.City</td>                    <td>                        <a href='/employee/edit/@emp.EmployeeId'>Edit</a>  |                        <a href='/employee/delete/@emp.EmployeeId'>Delete</a>                    </td>                </tr>            }        </tbody>    </table>}

At the top, we have defined the routes for our page. There are two routes defined:

1. /employee/{action}/{paramEmpID} : This will accept the action name along with employee ID. This route is invoked when we perform an Edit or Delete operation. When we call an edit or delete action on a particular employee’s data, the employee ID is also passed as the URL parameter.
2. /employee/{action} : This will only accept the action name. This route is invoked when we create a new employee’s data, or we fetch the records of all the employees.

We are also inheriting theEmployeeDataModel class, which is defined in the “EmployeeData.cshtml.cs” file. This will allow us to use the methods defined in the EmployeeDataModel class.

After this, we are setting the title that will be displayed on our page. The title is dynamic and changes as per the action that is being executed currently on the page.

We will show the “Create New” link only if the action is fetch. If the action is create or edit then the “Create New” link will be hidden and we will display the form to get the user input. Inside the form, we have also defined the two buttons “Save” and “Cancel”. Clicking on “Save” will invoke the CreateEmployee method whereas clicking on “Cancel” will invoke the Cancel method.

If the action is delete then a table will be displayed with the data of the employee on which the delete action is invoked. We are also displaying two buttons — “Delete” and “Cancel”. Clicking on the “Delete” button will invoke the DeleteEmployee method, and clicking on “Cancel” will invoke the Cancel method.

At the end, we have a table to display all the employee data from the database. Each employee record will also have two action links: “Edit” to edit the employee record and “Delete” to delete the employee record. This table is always displayed on the page, and we will update it after performing every action.

Adding the link to the Navigation menu

The last step is to add the link to our “EmployeeData” page in the navigation menu. Open the “BlazorSPA.Client/Shared/NavMenu.cshtml” page and put the following code into it:

<div class="top-row pl-4 navbar navbar-dark">    <a class="navbar-brand" href="/">BlazorSPA</a>    <button class="navbar-toggler" onclick=@ToggleNavMenu>        <span class="navbar-toggler-icon"></span>    </button></div><div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>    <ul class="nav flex-column">        <li class="nav-item px-3">            <NavLink class="nav-link" href="/" Match=NavLinkMatch.All>                <span class="oi oi-home" aria-hidden="true"></span> Home            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="/employee/fetch">                <span class="oi oi-list-rich" aria-hidden="true"></span> Employee data            </NavLink>        </li>    </ul></div>@functions {    bool collapseNavMenu = true;    void ToggleNavMenu()    {        collapseNavMenu = !collapseNavMenu;    }}

Hence, we have successfully created an SPA using Blazor, with the help of the Entity Framework Core database first approach.

Execution demo

Launch the application.

A web page will open as shown in the image below. The navigation menu on the left is showing the navigation link for the Employee data page.

Clicking on the “Employee data” link will redirect to the “Employee Data” view. Here you can see all the employee data on the page. Notice the URL has “employee/fetch” appended to it.

We have not added any data, hence it is empty. Click on “CreateNew” to open the “Add Employee” form to add new employee data. Notice the URL has “employee/create” appended to it:

After inserting data in all the fields, click on the “Save” button. The new employee record will be created, and the Employee data table will get refreshed.

If we want to edit an existing employee record, then click on the “Edit” action link. It will open Edit view as shown below. Here we can change the employee data. Notice that we have passed the employee ID in the URL parameter.

Here we have changed the City of employee Swati from Mumbai to Kolkatta. Click on “Save” to refresh the employee data table to view the updated changes as highlighted in the image below:

Now we will perform a Delete operation on the employee named Dhiraj. Click on the “Delete” action link, which will open the Delete view asking for a confirmation to delete. Notice that we have passed the employee ID in the URL parameter.

Once we click on the “Delete” button, it will delete the employee record and the employee data table will be refreshed. Here, we can see that the employee with name Dhiraj has been removed from our record.

Deploying the application

To learn how to deploy a Blazor application using IIS, refer to Deploying A Blazor Application On IIS.

Conclusion

We have created a Single Page Application with Razor pages in Blazor using the Entity Framework Core database first approach with the help of Visual Studio 2017 and SQL Server 2014. We have also performed the CRUD operations on our application.

Please get the source code from GitHub and play around to get a better understanding.

Get my book Blazor Quick Start Guide to learn more about Blazor.

You can also read this article at C# Corner

You can check my other articles on Blazor here.

See Also

• ASP.NET Core — Getting Started With Blazor
• ASP.NET Core — CRUD Using Blazor And Entity Framework Core
• Cascading DropDownList In Blazor Using EF Core
• Razor Page Web Application With ASP.NET Core Using ADO.NET
• ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
• ASP.NET Core — CRUD With React.js And Entity Framework Core

Originally published at https://ankitsharmablogs.com/