>> Hi everyone.
My name is Yohan,
and I'm a Senior Cloud Developer
Advocate working at Microsoft.
In this video, we'll see how to configure
routing in your Static Web Apps.
We'll start from this shopping app example
that displays a list of projects to the user.
First, let's have a look at the project.
This shopping app was coded
using four different frameworks
as you can see.
Here, we'll use the React version.
But feel free to use the version you know
best on other instructions if needed.
We start by quickly deploying this app
on Azure Static Web Apps.
Open the command palette with F1
and search for Create Static Web App.
I'll choose Custom as I need to tell
that my app is located in the react-app folder.
For the output folder,
build works for React.
Now, my app is being deployed.
It takes a few minutes.
Meanwhile, we'll have a look at
our app using the Static Web CLI.
In your terminal,
go to the react-app folder
and then run npm run build,
so you build the app.
Run the Static Web App emulator
with swa start build and open
the app in your browser.
You can see that the app works fine.
I can navigate normally.
But what if I refresh the page?
Suddenly, I get a 404 error.
That is because this app
is a single-page app and uses
client-side routing that shows
the URL you see at the top.
What happens when we hit "F5"
to refresh the browser is that
the browser tries to load the product's URL
and the web server searche
for matching products that HTML file,
and this one does not exist.
To fix this error,
we'll add routing configuration
to our Static Web App.
Now, we create a new file
called staticwebapp.config.json
in the react-app folder.
Now, we'll add a fallback rule
telling it to rewrite all routes
toward our root file index.html.
We'll also need to exclude
some file extensions here to avoid
our images and styling to be re-written too.
Now, if we restart the Static Web CLI server,
we can see that now it's working
if we refresh the browser.
Now, let's say that you refactored your app
and instead of using the products in the URL,
the previous page that you had
used the root name catalog.
You want all the users that already
bookmarked the old URL to be redirected
to the new Products page that you have.
You can do that by creating a new
routes array in your configuration file.
In there, you can specify
your root redirection like this.
First, you need to tell which
route you want to redirect.
Here, it's catalog.
Then you tell it to which URL
you want to redirect it to.
Here, it's products.
By default, the re-direct
will use the 302 status code,
meaning that it's only a temporary redirection.
But you can override that
by adding a statusCode property.
Let's use a 301 code here
as it's a permanent direction.
Now, if we restart the CLI again,
then try to navigate to the old catalog URL,
you can see that we are redirected
to the Products page.
There's a lot more that you can do
with routing configuration,
like adding headers to specify
how your images should be cached,
for example, or restrict access
to some parts of your application
to users that are not logged in.
But that's something you'll see
in the following videos.
That's it for this one.
See you.
[MUSIC]