Build an inventory management app with Azure Static Web Apps with + React, part 2

That is a part of #30DaysOfSWA.

On this half, we are going to preserve engaged on our stock administration system authored in React.



Recap, from half I

What now we have to this point is a React we scaffolded in Snowpack. We have additionally managed to deploy it to Azure utilizing Azure Static Net Apps service.



What now – let’s construct the precise app

Okay, now we have a React app however not likely a listing administration system at this level. So, what do we’d like?

  • A header
  • A menu
  • A important space
  • Static knowledge



Choose styling strategy

I like to start out with the CSS, for this I’ll use styled-components library, it simply resonates with my mind-set. This is what CSS can appear like expressed as a styled part:

const Menu = styled.ul`
  list-style: none;
  padding: 0;
`;
Enter fullscreen mode

Exit fullscreen mode

As an alternative of a ul component, now you can sort Menu and use that in your JSX.



Routing

We want routing, to assist the truth that we are going to use a menu with hyperlinks that may present us completely different elements of our app.

For this we are going to use React Router.

  1. Add these strains to your package deal.json: 
   "react-router": "6.3.0",
   "react-router-dom": "6.3.0",
Enter fullscreen mode

Exit fullscreen mode

Subsequent, let’s set up these:

  1. Run npm set up: 
   npm set up
Enter fullscreen mode

Exit fullscreen mode

Now you should have the libraries wanted so as to add routing to your app.



Setup routing

You want to instruct your app at high-level to make use of routing. We due to this fact begin with index.jsx.

  1. Change index.jsx guarantee it appears to be like like so:

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

import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  doc.getElementById("root")
);

Above, we use BrowserRouter and encapsulates the App part.

  1. Change the App part in App.jsx to appear like so:

    export default operate App() {
  return (
    <div>

      <Routes>
        <Route path="/" component={<Structure />}>
          <Route index component={<Dwelling />} />
          <Route path="about" component={<About />} />
          <Route path="merchandise/:id" component={<Product />} />
          <Route path="merchandise" component={<ProductList />} />
          <Route path="dashboard" component={<Dashboard />} />
          <Route path="*" component={<NoMatch />} />
        </Route>
      </Routes>
    </div>
  );
}

Above, now we have setup the routes and which parts ought to deal with a route request. path defines the route sample, and component is the part that may deal with the request.

We’ve not created these elements but, however we are going to šŸ™‚

We have to create a format part; it is going to represent of our menu and an space the place content material is loaded as quickly as we choose a hyperlink.

  1. Add the next part Structure:

    operate Structure() {
  return (
    <Overview>
      <Header>Welcome to Stock administration system!</Header>
      <Navigation>
        <Menu>
          <Merchandise>
            <NavLink to="/" className={({ isActive }) => (isActive ? 'lively' : 'inactive')}  >Dwelling</NavLink>
          </Merchandise>
          <Merchandise>
            <NavLink to="/about" className={({ isActive }) => (isActive ? 'lively' : 'inactive')} >About</NavLink>
          </Merchandise>
          <Merchandise>
            <NavLink to="/merchandise" className={({ isActive }) => (isActive ? 'lively' : 'inactive')} >Merchandise</NavLink>
          </Merchandise>
          <Merchandise>
            <NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'lively' : 'inactive')} >Dashboard</NavLink>
          </Merchandise>
          <Merchandise>
            <NavLink to="/nothing-here" className={({ isActive }) => (isActive ? 'lively' : 'inactive')} >Nothing right here</NavLink>
          </Merchandise>
        </Menu>
      </Navigation>

      <hr />
      <Content material>
        <Outlet />
      </Content material> 

    </Overview>
  );
}

  2. Now add some styling above all elements:

    const Header = styled.h1`
  show: block;
  background: DarkRed;
  colour: Wheat;
  width: 100%;
  grid-row: 1;
  padding: 20px 10px;
  font-size: 16px;
  grid-column-start: 1;
  grid-column-end: 3;
  margin: 0;
`;

const Navigation = styled.nav`
  width: 200px;
  background: DarkSlateGrey;
  grid-row:2;
  grid-column: 1;
`;

const Content material = styled.div`
  grid-row:2;
  grid-column: 2;
  padding: 20px;
`;

const Overview = styled.div`
  show: grid;
  grid-template-rows: 60px 100%;
  grid-template-columns: 200px 100%;
  width: 100vw;
  peak: 100vh;
`;

const Menu = styled.ul`
  list-style: none;
  padding: 0;
`;
const Merchandise = styled.li`
 margin: 10px 0px;

 a {
   padding: 10px 5px;
   show: block;
   colour: white;
   text-decoration: none;
 }
`;

    We use a grid system for our header, left menu and important content material space.

  3. Lastly, add some styling to index.css:

   li>a.lively {
      font-weight: daring;
      border-right: stable 10px crimson;
    }
Enter fullscreen mode

Exit fullscreen mode

This can make sure that a particular menu merchandise has visible indicator when a selected hyperlink has been chosen.



Create elements

Now, we have to create the elements we talked about once we configured routing in App.jsx.

Create a Pages listing and create the next:

  1. Create About.jsx with the next content material: 
    import * as React from "react";

    operate About() {
      return (
        <div>
          <h2>About</h2>
        </div>
      );
    }

    export default About;
Enter fullscreen mode

Exit fullscreen mode

  1. Create Dashboard.jsx with the next content material: 
    import * as React from "react";

    operate Dashboard() {
      return (
        <div>
          <h2>Dashboard</h2>
        </div>
      );
    }

    export default Dashboard;
Enter fullscreen mode

Exit fullscreen mode

  1. Create Dwelling.jsx with the next content material: 
    import * as React from "react";

    operate Dwelling() {
      return (
        <div>
          <h2>Dwelling</h2>
        </div>
      );
    }

    export default Dwelling;
Enter fullscreen mode

Exit fullscreen mode

  1. Create NoMatch.jsx with the next content material: 
    import * as React from "react";

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

    operate NoMatch() {
      return (
        <div>
          <h2>Nothing to see right here!</h2>
          <p>
            <Hyperlink to="/">Go to the dwelling web page</Hyperlink>
          </p>
        </div>
      );
    }

    export default NoMatch;
Enter fullscreen mode

Exit fullscreen mode

  1. Create Product.jsx with the next content material: 
    import * as React from "react";

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

    operate Product() {
      let { id } = useParams();

      return (
        <React.Fragment>
          <div>Product merchandise {id}</div>
          <div>
            <Hyperlink to="/merchandise">Again to product record</Hyperlink>
          </div>

        </React.Fragment>

      );
    }

    export default Product;
Enter fullscreen mode

Exit fullscreen mode

  1. Create ProductList.jsx with the next content material: 
    import * as React from "react";

    import styled from "styled-components";
    import { Hyperlink } from "react-router-dom";

    const ProductsContainer = styled.div`
      show:flex;
      width: 100%;
      flex-orientation: row;
      flex-wrap: wrap;
      width: 800px;
    `;

    const ProductQuantity = styled.div`
      font-size: 40px;
      grid-row:1;
      colour: white;
    `;

    const ProductName = styled.div`
      grid-row:2;
      colour: white;
    `;

    const ProductItem = styled.div`
      padding: 20px 10px;
      box-shadow: 0 0 5px gray;
      margin: 5px;
      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 10%, rgba(0,212,255,1) 100%);
      a {
        colour: white;
      }

      width: 200px;
      peak: 100px;
      show: grid;
      grid-template-rows: 50% 50%;
    }
    `;

    const merchandise = [{
      id: 1,
      name: "Nuts",
      quantity: 30
    },
    {
      id: 2,
      name: "Bolts",
      quantity: 20
    },
    {
      id: 3,
      name: "Screw drivers",
      quantity: 5
    },
    {
      id: 4,
      name: "Hammers",
      quantity: 5
    }]

    operate ProductList() {
      const knowledge = merchandise.map(p => <ProductItem>
        <ProductQuantity>{p.amount}</ProductQuantity>
        <ProductName>
         <Hyperlink to={`/merchandise/${p.id}`}>
          {p.title}
          </Hyperlink>
        </ProductName>

      </ProductItem>);
      return (
        <ProductsContainer>{knowledge}</ProductsContainer>
      );
    }

    export default ProductList;
Enter fullscreen mode

Exit fullscreen mode



Check out the app

At this level, you have got constructed out the app, let’s look.

  1. Run npm begin: 
   npm begin
Enter fullscreen mode

Exit fullscreen mode



Deploy

Our app is already related to Azure Static Net Apps, and that is the attractive half, all we have to deploy our modifications is to run some git instructions.

  1. Run the next git instructions to push your modifications to Azure: 
   git add .
   git commit -m "new modifications"
   git push
Enter fullscreen mode

Exit fullscreen mode

  1. Now go to your repo on GitHub and the Actions, as soon as it completed, in 1-2 minutes, you will notice your app deployed on Azure.



Examine your modifications

Go to your app on-line to make sure modifications are there.

  1. A option to discover the URL is to go by way of Visible Studio Code, and the Azure extension > Azure Static Net Apps and right-click your app and choose Browse Web site.

  2. Strive clicking Merchandise within the left menu, now reload the web page, you bought a 404 proper?

That is due to how routing is setup in your app. Don’t be concerned, we will repair this:

  1. Create staticwebapp.config.json and provides it the next content material: 

      "navigationFallback": {
        "rewrite": "/index.html"
      }
    }
Enter fullscreen mode

Exit fullscreen mode

What you’re saying right here is let Azure Static Net Apps deal with routes to /Merchandise and /About and so on and redirect it to index.html. Your React will now how you can take care of these routes from right here.

  1. Add and push your modifications: 
   git add .
   git commit -m "including navigation fallback"
   git push
Enter fullscreen mode

Exit fullscreen mode

In the event you confirm your deploy this time, it would not fail when you navigate to /merchandise and reload, does it? šŸ™‚



Answer

Take a look at this repo repo



Abstract

Congrats, you managed to construct a React app and deploy your modifications to Azure and utilizing Azure Static Net Apps.

Within the third half we are going to add an API, as a result of proper now now we have static merchandise record and that is nice for prototyping however not for an actual app.

Add a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Join us on Social Media

Facebook Twitter Youtube