Creating A Single Page Application In SPFx

We all know that Microsoft is trying everything it can to modernize the SharePoint experience for its users. The main reason behind this is to give consumers the freedom to customize the SharePoint they use.

Another advantage of opting for a modern look over the classic look is that it is responsive in nature. When you create a site or a page with the modern experience then you need not worry about how it’ll look on different devices. Microsoft handles it for you.

With this being said, let’s move on with our SharePoint framework web part.

SharePoint Framework

Again, this will leave us with a question of why SPFx. This is because it lets you create custom apps for your SharePoint and it is easier to develop and deploy the application packages.

Getting Started

You can refer to the “Getting Started” section of my previous blog here Or you can also refer the official Microsoft Docs on building your first client-side web part.

After creating the SPFx project, open your code editor and navigate to your project directory.

You can see that yeoman has beautifully created your project structure.

Creating A Single Page Application In SPFx

Now, we’ll start building our SPA (Single Page Application) with SharePoint Framework.

What is a Single Page Application?

An SPA is a web application which will dynamically update your changes in the DOM without reloading the page itself.

When you have one or more components and you want to switch between these components, but you don’t want the page to reload every time, then the ideal approach for this is SPA.

Integrating SPA with SPFx

Coming back to our code, one of the important modules in Single Page Applications is Router.

Router takes care of the path to redirect a particular component.

Open the command prompt and go to your project directory.
Now, install

“npm i react-router-dom”

Building Our Components

Let’s first design the layout of our application.

You can design the Application layout as you wish. Now we’ll start building these components first.

Create a separate folder for each of your components.

The Routing Part

Move to <your-application>.tsx which will act as the routing component. (In my case it is “SinglePageApp.tsx”)

Import the modules required for Routing,

import { BrowserRouter as Router, Route, Link, Redirect, Switch, HashRouter, PropsRoute } from 'react-router-dom';

Import all the Components that the single page application requires.

import HomePage from './DashBoard/index';
import AppPage from './Apps/App_Page';
import Pages from './Pages/Pages';
import Navigation from '../components/SideNav/Navigation';

Modify the render function to adapt to the routing.

export default class SinglePageApp extends React.Component<ISinglePageAppProps, {}> {
public render(): React.ReactElement<ISinglePageAppProps> {
return (
<HashRouter >
<Stack horizontal gap={15}>
<Navigation />
<StackItem grow={2}>
<Switch>
<Route path='/' exact={true} component={() => <HomePage {...this.props} />} />
<Route path='/Apps' component={() => <AppPage {...this.props} />} />
<Route path='/Pages' component={() => <Pages {...this.props} />} />
</Switch>
</StackItem>
</Stack>
</HashRouter>
);
}
}

You can see that I’ve used,

<Route path='/' exact={true} component={() =><HomePage {...this.props} />} />

This piece of code takes care of the actual routing process.

Path
The URL path where you want to render your component.
Exact
It is used to tell the application to strictly render the component only if the path is the same as mentioned.
Component
Here you can define which component to render and where to render.

The whole SinglePageApp.tsx will look like this.

import * as React from 'react';
import { ISinglePageAppProps } from './ISinglePageAppProps';
import { Stack, StackItem } from 'office-ui-fabric-react';
import HomePage from './DashBoard/index';
import AppPage from './Apps/App_Page';
import Pages from './Pages/Pages';
import Navigation from '../components/SideNav/Navigation';
import { BrowserRouter as Router, Route, Link, Redirect, Switch, HashRouter, PropsRoute } from 'react-router-dom';
export default class SinglePageApp extends React.Component<ISinglePageAppProps, {}> {
public render(): React.ReactElement<ISinglePageAppProps> {
return (
<HashRouter >
<Stack horizontal gap={15}>
<Navigation />
<StackItem grow={2}>
<Switch>
<Route path='/' exact={true} component={() => <HomePage {...this.props} />} />
<Route path='/Apps' component={() => <AppPage {...this.props} />} />
<Route path='/Pages' component={() => <Pages {...this.props} />} />
</Switch>
</StackItem>
</Stack>
</HashRouter>
);
}
}

As a final step, we’ll have to modify our Navigation.tsx file so that on clicking, we’ll get redirected to that component.

links: [
{
iconClassName: styles.button,
name: 'DashBoard',
url: '#/',
key: 'key2',
isExpanded: true,
},
{
name: 'Apps',
url: '#/Apps',
key: 'key3',
isExpanded: true,
},
{
name: 'Pages',
url: '#/Pages',
key: 'key4',
}
]

Run “gulp serve” and go to your localhost.

Click different components to see the routing changes.

Wow! We have created our Single Page Application successfully. Follow me to catch up with articles on SPFx and React.