Building BitPrice web application using Next js and React js Then deploy it  to Azure Static Website
Tags: nextjs, react, azure
Published: 2021-02-19 07:13:49



In this post, I will show you the next js implementation with react js. I will do a sample web app called BitzPrice which is an app that shows the bitcoin price by using an API from bitcoin. and then I will show you how to deploy it to the azure static web app.

so let's get started with the next js.

#**Part 1: Setting environments for development**
**Step 1: Installing Dependencies.**
```npm
npm install next react react-dom --save
```
After the package have been successfully installed we will get a file called package.json
in that file, delete everything inside script tag and add the following 
**Step 2: Adding scripts.**
```
"dev":"next"
"build":"next build"
"start":"next start"
```
so that our package.json will look like the following

```JSON

{
  "name": "Next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "isomorphic-unfetch": "^3.1.0",
    "next": "^10.0.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}
```
**Step 3: Project structure.**
Create one directory for a page called  **pages** this directory is useful for routing. next js by default will iterate through this directory and create routing for all pages inside this pages directory so we don't have to create the pages manually as we do in the react js application. that is one use of next js.
after that, we will create a directory called **components** for putting all the components inside this directory.

the project structure should look like this.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46it0lvnwotlbs1wnnoo.png)

#**Part 2: Start Implementation**
**Step 1: creating pages.**
inside the pages directory create two pages called **index.js** and **about.js**

so we have two different pages. but both have the same navigation bar so that we have to implement the navigation bar once and use it for both of the pages.
so in the component directory create the **navbar.js** component so that we will just import this component on both of our two pages.

inside this navbar.js add the following code.

```Javascript
import Link from 'next/link';
const Navbar = () => (


    <nav className="navbar navbar-expand navbar-dark bg-dark mb-4">
        <div className="container">
            <a className="navbar-brand" href="#">BitzPrice</a>
            <div className="collapse navbar-collapse">
                <ul className="navbar-nav ml-auto">
                    <li className="nav-item">
                        <Link href="/"><a className="nav-link">Home</a></Link>
                    </li>
                    <li className="nav-item">
                        <Link href="/about"><a className="nav-link">About</a></Link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
);

export default Navbar;
```
next, we will create a component called **layout.js** this component is like the high order function in react js that used to surround the pages so that the navbar and other common services will be provided. so put the following code inside this layout.js

```Javascript
import Head from 'next/head';
import Navbar from './Navbar';

const Layout = (props) => (
    <div >
        <Head>
            <title>BitzPrice</title>
            <link rel='stylesheet' href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
        </Head>

        <Navbar />

        {props.children}
    </div>
);


export default Layout;import Head from 'next/head';
import Navbar from './Navbar';

const Layout = (props) => (
    <div >
        <Head>
            <title>BitzPrice</title>
            <link rel='stylesheet' href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
        </Head>

        <Navbar />

        {props.children}
    </div>
);


export default Layout;
```
**{props.children}** this code will pass the children from the child component to the parent or layout component so that it will be displayed as it is. in this application, we will use this code to display the price of bitcoin in different currencies.

next, create the **price.js** component inside the component directory. this component will show the price on the index directory.
and add the following code inside.
```Javascript
import React from 'react'

class Prices extends React.Component {
    state = {
        currency: 'EUR'
    }




    render() {

        let list = '';
        if (this.state.currency === 'USD') {

            list = <li className="list-group-item">
                Bitcoin rate for {this.props.bpi.USD.description} : <span className="badge badge-primary">
                    {this.props.bpi.USD.code}
                </span> <strong>{this.props.bpi.USD.rate}</strong>
            </li>


        } else if (this.state.currency === 'GBP') {

            list = <li className="list-group-item">
                Bitcoin rate for {this.props.bpi.GBP.description} : <span className="badge badge-primary">
                    {this.props.bpi.GBP.code}
                </span> <strong>{this.props.bpi.GBP.rate}</strong>
            </li>


        } else if (this.state.currency === 'EUR') {

            list = <li className="list-group-item">
                Bitcoin rate for {this.props.bpi.EUR.description} : <span className="badge badge-primary">
                    {this.props.bpi.EUR.code}
                </span> <strong>{this.props.bpi.EUR.rate}</strong>
            </li>

        }
        return (<dev>



            <ul className="list-group">
                {list}
            </ul>
            <br />
            <select onChange={e => this.setState({
                currency: e.target.value
            })} className="form-control">
                <option value="USD"> USD</option>
                <option value="GBP"> GBP</option>
                <option value="EUR"> EUR</option>

            </select>
        </dev>




        )

    }
}

export default Prices;
```


next, add the following code to the **index.js**  file we have previously created in the pages directory.

```Javascript
import Layout from '../Components/Layout'
import Fetch from 'isomorphic-unfetch';
import Prices from '../Components/Prices'

const index = (props) => (
    <div>

        <Layout>
            <h1>Welcome to the index page.</h1>
        </Layout>

        <Prices bpi={props.bpi.bpi} />
        {/* {props.bpi.bpi.USD.description} */}
    </div>
);


index.getInitialProps = async function () {
    const res = await Fetch("https://api.coindesk.com/v1/bpi/currentprice.json");
    const data = await res.json();
    return {
        bpi: data
    }
}

export default index;
```
in the above code, the price from the API will be fetched and passed to the **price.js** component so that it will render in a structured manner. the price component is expecting this information using props. next, we will add the **about.js** page just to show how the routing works. On this page, we will add some texts to show that the page is displaying on the about page. so create **about.js** inside the pages directory and add the following code inside that file.


```Javascript
import Layout from '../Components/Layout';
const index = () => (
    <div>
        <Layout>
            <h1>
                Welcome to the About page!
            </h1>
        </Layout>
    </div>
);


export default index;


```
so far we have done with the implementation part let us see what we have done by running the app.

use the following command to run this application locally.
```npm
npm run dev
```
then we got the following result

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bavwfqzzicy6hq1vxabi.png)

if we go to the specified URL given by the next js for the application we will get the following page.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9o8extvjlhuohpe994v.png)

**YEAH!!** so this means everything is working fine locally the next thing we will do is to deploy this application to the azure static web app. you can find the Github code [here](https://github.com/CloudBloq/BitzPrice)

#**Part 3: Deploying the app to azure**
**Step 1: configuring GitHub**
we have to first configure GitHub on our local machine and push the code to the GitHub source control. I will not go in-depth with that like how to install the GitHub for the local machines and things similar to this staff are considered as already known. so we will proceed to add remote on our code, committing the application, and push it to Github.

okay, so the first thing to do is create a repository for our web application inside the GitHub repositories.
after that, we have to add this repository to our local machine.
so open **cmd** if you are on Windows or **terminal** if you are on some other Linux operating system. navigate to the project directory from the cmd or terminal. if you are using vs code you don't have to do this just click on the terminal tab then you will get a terminal with the current working directory.

next to this let us initialize the git repository locally.

```git
git init
```
this will create an empty git repository

then let us add a remote repository where our code will be pushed.

```git
git remote add [remoteName] [link to the remote git repository]
```

in my case it will be like this

```git
git remote add cloudbloq https://github.com/CloudBloq/BitzPrice
```
before we commit the changes to the local repository we have to update the **package.json** file to use it for the azure configuration.
add the following to the script tag inside package.json
```JSON
"build":"next build && next export"
```
you will see the purpose of adding this later.

so that our full package.json look will be like this
```JSON

{
  "name": "Next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build && next export",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "isomorphic-unfetch": "^3.1.0",
    "next": "^10.0.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}
```




next to this commit the changes to the local repository 
you can do this by the following command

```git
git commit -m "commit message"
```
then push it to GitHub

```git
git push cloudbloq
```

**Step 2: Integrate Azure to GitHub and deploy the code**

**Okay only some staffs remain keep walking with me**
go to the Azure portal home page [Azure portal](https://portal.azure.com/#home) 
you should have an azure account for deploying the app. if you don't have any you can go and create [a student free account]
(https://signup.azure.com/studentverification?offerType=1&correlationId=25A356BC12006ED80C575965131D6F8E)
you should use student email like **someone@student.oauife.edu.ng**
once you created and login to your account you will see a page like this.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz8qv7v1o7gbxxo3nebv.png)
**Let us go to the deployment now**

First, we should have a resource group so let us create a resource group. go to the **Resource groups** option from the top listed tabs.
you will get this page.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as3ndq18z6mag54xhdq2.png)

then click on the *Add** option at the top

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4m6olekxk8tgz2ct7g5.png)
after filling in all the necessary information click on the **Review+create** option at the bottom that is decorated with blue color. so that you will successfully create a resource group. the purpose of this resource group is to group some similar things. we will use it later to create a static web app.

**Alright!**

let us go to the main goal. which is creating the static web app.

so go back to the [Azure portal](https://portal.azure.com/#home) 

on the top left you can see there is an option for **Static Web app(preview)** click that option.
 then you will get into this page.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kh1eerlvf7xxx59yfh4.png)

Click on the **Add** button at the top left corner.

you will see a page like this.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jutwsjeqro9lazufa18.png)
choose the resource you have created before on the option of **Resource Group** 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l9tdr51qxmpca8a0ekv.png)
then it will ask you to **SignIn using Github** click that and a page to authorize the azure with GitHub will come.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrb4a710yg1si6k7dd43.png)
Click on the green **Authorize** button at the bottom right. then it will ask you to put in the password and after that, it will redirect you back to the azure site with some other additional options. 
  

 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmjq7urgw94vo7l977j1.png)

fill all the necessary information on the options listed below
in my case it will be like this

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pusoxejbert3v24ox20f.png)
  and choose react on the build preset options
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ou72ausp9n5gzpumz84.png)
then when you are sure of filling in all the necessary information click the **Review + Create" option on the bottom.
Then you will get this page.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itqjof92zuapfs9ulnol.png)

Click on the **create** button at the bottom and wait till finish the build.  

After it successfully builds it will create the static web app. click on the dialog coming with text like **Go to Resources** at the top right corner. when you click that you will get a page like this.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j7yzy7y9f0x8qt269j2.png)
**YES!!!** our static web is ready now. let us check it by clicking on the link.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rit3ynpall3sm411n6ic.png)
but I am not getting what I want. what may be the problem?  

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82mkgkgcoephj0a0jv8a.png)
Click on the deployment history and click on **GitHub action runs**
 you will see this page
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rezgvnxuhu7gx3coddn.png)
 it means that it is still building.
remember what I have said to you before. you can see now the use of the below script tag. our app is building on GitHub because of this script.
```JSON
"build":"next build && next export"
```


after some time i got my website 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/damf8yavbx06ikrmlazn.png)
check out the site [BitzPrice](https://gentle-sky-00ccc8900.azurestaticapps.net/)