If you're using PHP or any PHP framework/library for the first time, you've probably noticed when you tried to use composer to create a project that you don't have certain extensions. You may have tried to go to composer to install these extensions, only to find out that this isn't working. Here's how to solve that problem.

You may be surprised to find out that these extensions are already installed, but just are not enabled. To enable these, you must go to _C:\tools\php80\_ in your file explorer. Next, you need to look for the **php.ini** file. It may be hard to find this because the **.ini** file extension is not shown after PHP. To locate this file, look for the icon that has the **Configuration settings** type. ![php.ini](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/blogs%2Fphp_extensions%2Fphp_ini.png?alt=media&token=4599e91c-3dda-4209-9fab-5da8053d44dc) Next, open it using your code editor/text editor/IDE. Next search for a long list of extensions that begin with _;extension_. The **;** comments out a single line, so look for the extensions that begin with **;extension** and delete the **;**. This will enable the extension. You are now ready to use the PHP framework/library of your choice. 

While developing your web app, you may try to install a package from composer, only to find that an extension that is not already in the _php.ini_ file. How can you fix this?

## Adding Extensions

To add extensions, you need to go to _http://pecl.php.net/_ to find the extension you need. (I'm using MongoDB as an example) When you find an extension, find the right version and click on **dll**. ![dll not tgz](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/blogs%2Fphp_extensions%2Fdll.png?alt=media&token=89f136ce-1bc7-4ba5-bf62-11d38af7d947) Again, look for the version compatible with your version of PHP, and download the ** non-threaded** file if you're not using apache. After that, extract the file and find the **dll** file. Next copy the file into _C:\tools\php80\ext_. You can then add the entry for the new extension in _php.ini_ like the other extensions (for example, to add MongoDB, you would type **extension=mongodb** in alphabetical order of extensions unless stated otherwise). With that done, you can then install the package you need.

Adding/Enabling Extensions in PHP using Windows

## Rewriting an ExpressJS app as a NextJS app (Day 3: Implementing MongoDB and adding CRUD Functions)

### Fixing the overwrite error

As stated in my [previous blog post](https://alonzoaustin.com/blog?title=v8EXkRdaUUyxDKQqevr8), I ran into a problem where my NextJS app threw an error at me claiming that I was trying to overwrite the collection whenever I went to MongoDB Atlas to look at the data. At first, I decided to move on and deal with it later, as it would be rare for me to go to MongoDB Atlas after deploying.

It wasn't until I created a Read REST API using Mongoose that I realized that this was going to be a problem as my app would only let me see the data once unless I restarted the development server. After going to MongooseJS's official site and reading docs on how to get around this, I figured out that I needed to create a connection rather than just use a connection. Then I needed to move everything related to Mongoose under the try statement and made sure that I added an await statement to the const since my CRUD functions were async functions. My APIs ended up looking something like this:

``` javascript

import mongoose from 'mongoose'


export default async function(req, res){
    
    
    try {
        mongoose.set('useFindAndModify', false)
        const connection = await mongoose.createConnection(process.env.MONGODB_CONNECTION, {
            useNewUrlParser: true,
            useUnifiedTopology: true
        }).catch(function(err){
            console.log("error:", err)
        })
        
        const Schema = mongoose.Schema
        const cardSchema = new Schema({
            title: String,
            note: String,
            user: String
        })
        const Card = connection.model('Notes', cardSchema)
        const card = new Card({
            title: req.body.title,
            note: req.body.note,
            user: req.body.user
        })
        card.save()
        res.status(200).json({status: "everything's good"})
    } catch(error){

        res.status(500).json({Error: error.message})
    }
}
```

I made sure that the rest of the CRUD functions had the same format except for the creation part. CRUD functions could then be made in a way similar to the way one would do so in ExpressJS.

### Making the web app usable

After making pages that made use of the APIs, I ran into a problem where the data would not be fetched if I were to refresh the page. To fix that, I added a const called `loadingCondition` that was equal to the state of `true`. While true, I would allow the data to be fetched. Once that was complete, I made sure that the state of `loadingCondition` was set to `false`, making sure that the data would not need to be fetched again.

With everything in place, I then committed the changes, deployed it to **Vercel**, and took the Nameservers from Vercel to GoDaddy to change the domain name to [studythat.site](https://studythat.site)

Rewriting an ExpressJS app as a NextJS app (Part 3)

## Recycling old components

After implementing authentication to my webapp, I decided to reuse the styles I used from the Express version and a navbar I used from [Kodebroilers](https://kodebroilers.site)-one of my projects.

Because I wanted everything to look the same as the Express Version, I decided to save time by copying and pasting the styles from the css file from the Express Version to the `globals.css` file in the NextJS version. This allows me to reuse the styles without having to create new `.module.css` files for every page or component and frees me from having to import them and writing 	`className={styles./*enterclassName*/}` for each element.

Reusing the Navbar was easy considering that Kodebroilers was a web app that allows users to copy and paste components or lines of code that they would reuse constantly. Because I want all of my projects to share a similar style, I made sure that after I deployed Kodebroilers, I copied and pasted the navbar I used in Kodebroilers into Kodebroilers. This allowed me to easily reuse it in the NextJS version. I had to make some adjustments such as making sure that the `Link` element is now imported from `Next/link` rather than from `react-router-dom` and made sure that I replaced `to` with `href` when using the `Link` element. I also changed the color scheme to match the style of the webapp. It now looks like this (the svg icon colors looks different because I edited them in the `globals.css` file to make sure that all svg icons have the same color throughout the web app) 

``` javascript

import React from 'react'
import Link from 'next/link'
import { useUser } from '@auth0/nextjs-auth0'

export default function Nav(){

    const {user} = useUser()

    const navStyle = {
        backgroundColor: '#F5F5F5',
        padding: '30px',
        border: 'none',
        borderRadius: '12px',
        position: 'fixed',
        top: '35%',
        /* top: !currentUser ? '35%' : '20%', */
        right: '5px',
        boxShadow: '4px 4px 4px rgba(0, 0, 0, 0.25)',
        zIndex: '3',
        display: 'flex',
        flexDirection: 'column'
    }

    const navButtonStyle = {
        margin: "auto",
        marginTop: "15px",
        marginBottom: "15px",
        width: '32px',
        height: '32px',
        color: 'white'
    }

    return(
        <nav style={navStyle}>
            <Link href="/">
                <svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
                    <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
                </svg>
            </Link>
            <Link href="/create">
                <svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
                </svg>
            </Link>
            {/* <Link href="/account">
                <svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                </svg>
            </Link> */}
            {user && <a href="/api/auth/logout">
                <svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-door-closed-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v13H1.5a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2a1 1 0 0 0-1-1H4zm2 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                </svg>
            </a>}
            {!user && <a href="/api/auth/login">
                <svg style={navButtonStyle} width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-door-closed-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v13H1.5a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2a1 1 0 0 0-1-1H4zm2 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                </svg>
            </a>}
        </nav>
    )
}
             
```

## testing out MongoDB

I first started by creating a folder in the api folder called `create`. Within that folder, I created an `index.js` folder. At first, the file looked something like this:

``` javascript

import mongoose from 'mongoose'

mongoose.set('useFindAndModify', false)
mongoose.connect(process.env.MONGODB_CONNECTION, {
            useNewUrlParser: true,
            useUnifiedTopology: true
        }).catch(function(err){
            console.log("error:", err)
        })
        
        const Schema = mongoose.Schema
        const cardSchema = new Schema({
            title: String,
            note: String,
            user: String
        })
        const Card = mongoose.model('Notes', cardSchema)


export default async function(req, res){
    
    
    try {
        const card = new Card({
            title: req.body.title,
            note: req.body.note,
            user: req.body.user
        })
        card.save()
        res.status(200).json({status: "everything's good"})
    } catch(error){

        res.status(500).json({Error: error.message})
    }
}

```

I ended the day by testing the api by creating a `create.js` page that allowed me to create a card. It was a simple form that resembled the style of a form in [Kodenshare](https://kodenshare.site)-another one of my projects. Although I was able to Post the data to MongoDB, I ran into a problem. As soon as I opened MongoDB in my browser, my webapp would not allow me to Post any more data. The console then returned an error indicating that I was trying to overwrite the Notes collection when I was not intending that to happen. It wouldn't be until the following day that I would patch the problem.

Rewriting an ExpressJS app as a NextJS app (Part 2)

After creating a web app with ExpressJS (with EJS as the template engine) and MongoDB as the database, I deployed the app to Heroku. Everything worked out except for the fact that Heroku would not let me add a domain name without **www** unless I got a subscription. Not wanting to pay, I decided to switch to a framework that I loved so that I can deploy it on **vercel**-which allows me to add any domain name I want for free without **www**. This also allowed me to see if I really need a MERN Stack to create a full-stack app with ReactJS or if I could just use NextJS. While I was at it, I decided to add authentication so that each user could have their own cards.

## Authentication

At first, I tried to use **NextAuth**; however, I kept on getting an error message indicating that a database is required. I tried to find a solution; however, I could not. After some time, I decided to try a different authentication method. That's when I discovered Auth0. While Auth0's easy-to-use application menu and starter kit made it easy to set up authentication, it was their documentation and login customization that won me over.

At first, I had to add the right node module for it to work with NextJS.

``` bash

yarn add @auth0/nextjs-auth0

```

Then I needed to create a dynamic api called `[...auth0].js` inside a folder called **auth** in the api folder. inside `[...auth0].js`, I wrote the following: 

``` javascript

import { handleAuth } from '@auth0/nextjs-auth0'

export default handleAuth()

```
In the `_app.js` file, I made sure it looked like this

``` javascript


import { UserProvider } from '@auth0/nextjs-auth0'
import '../styles/globals.css'


function MyApp({ Component, pageProps }) {

  return (
    <UserProvider>
      <Component {...pageProps} />	      
	<UserProvider>
  )
  
export default MyApp
```

To ensure that users could log in/sign-up, I had to add a link to the signin page through the dynamic api `[...auth0]`.

I did this by adding `<a href="/api/auth/login">signin</a>` so that users can sign in and `<a href="/api/auth/logout">signout</a>` so that users can sign out.

I also wanted to make sure that a user actually is logged in. To do this, I added `import { useUser } from '@auth0/nextjs-auth0'` to the top of my `index.js` page. Using the `useUser` function, I was able to check to see if a user was logged in by adding the following:

``` javascript

const {user} = useUser()

user && user.name ? console.log("user", user) : console.log("not loggedin")
```

At the end of the day, I decided to change the login page so that it would look similar to the login pages in my other projects. Auth0 allowed the login page to be edited using HTML so that any web developer would be able to customize it with ease. Here's what my login page now looks like: ![login page](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/studythat-next%2Fauth0login.png?alt=media&token=895413f4-4ee3-4566-b73e-33a58e6d9449)



Rewriting an ExpressJS app as a NextJS app (Part 1: authentication)

Instead of writing individual html pages or embedding an article from an external blog site, you may want to make your own customization to your articles and to make use of markdown's simplicity to write blogs alongside NextJS's incremental static site generation for fast loading and dynamic data. However, if you have used a markdown parser, you probably have realized that while it gets the job done, you would prefer to have syntax highlighting in your code snippets rather than just having text that looks somewhat different from your paragraphs. If you have faced this, there is a solution to this. First you need to install two packages: markdown-it and highlight.js.

``` bash
// if you're using npm

npm i highlight.js
npm i markdown-it

//if you're using yarn

yarn add highlight.js
yarn add markdown-it

```

First, at the top of your file, you need to import hljs from highlight.js and then import MarkdownIt from markdown-it.

``` javascript
import hljs from 'highlight.js'
import MarkdownIt from 'markdown-it'
```
After that, you need to create a const (let's call it md) that is equal to a MarkdownIt function that incorporates hljs that was imported. This will allow Markdown-It to recognize parts of your markdown data that has code and will apply syntax highlighting for that language. It should look something like this.

``` javascript
    const md = new MarkdownIt({
        highlight: function (str, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return '<pre class="hljs"><code>' +
                     hljs.highlight(lang, str, true).value +
                     '</code></pre>';
            } catch (err) {console.log(err)}
          }
      
          return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
        }
      });

```
After that, you can create a div element with an attribute called dangerouslySetInnerHTML. That attribute should contain an object with a propterty called: __html (yes with two underscores). This should be equal to md.render(/*your markdown data*/, */language*/)  (assuming that you named the const md). It should look like this:


``` javascript
<div id={styles.blog} dangerouslySetInnerHTML={{__html: md.render(/*your markdown data*/, */language*/)}}></div>

```

Finally to make sure that syntax highlighting actually appear, you need to import a css file from highligh.js in your _app.js file. Highlight.js has alot of css styles so you can experiment with those. To find those styles, you can go to the node_modules folder, then inside that folder go to the highlight.js folder, and then styles. The import statement should look something like this:

``` javascript
import 'highlight.js/styles/atelier-forest-light.css'
```
In the end, you will have a blog article with syntax highlighting. [E.G This site](https://alonzoaustin.com/blog?title=Rj0nK8aJE1vj1QpgOETx)

How to parse fetched markdown in NextJS with Syntax Highlighting

If you have tried to implement CodeMirror in a NextJS project, you may have seen an error like this everytime you refresh the page:

![Navigator not defined error](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/blogs%2Fnavigator%20is%20not%20defined.png?alt=media&token=8130dcb6-fb01-4338-8356-6702dd3038b2)

Instead of hoping that your user would not refresh the page or removing CodeMirror all together, you could try to fix it. Here's how.

Before starting ensure that you do have **react-codemirror** and **codemirror** installed. If not, copy and paste the following within your terminal

``` bash

// if you have npm

npm i codemirror

npm i react-codemirror

//if you have yarn

yarn add codemirror

yarn add react-codemirror

```

## Dynamic Importing

First, you need to make sure that you import `react-codemirror` and your desired themes and modes using **Dynamic imports**. To do this, import the dynamic function from NextJS normally as you would with any other npm/yarn package.

``` javascript

import dynamic from 'next/dynamic'

```

With this function imported, you can start to dynamically import react-codemirror and it's dependencies.  Keep in mind though that you have to dynamically import these outside your exported function. Create a const called **CodeMirror** and set it equal to the dynamic function. Inside the dynamic function,  import the dependencies (e.g. `import('codemirror/mode/xml/xml')`) and then return with `import('react-codemirror')`. After you have imported all of these, add an object within the function declaring `ssr: false`. In the end, it should look something like this:

``` javascript

const CodeMirror = dynamic(() => {
    import('codemirror/mode/xml/xml')
    import('codemirror/mode/javascript/javascript')
    import('codemirror/mode/css/css')
    import('codemirror/mode/markdown/markdown')
    import('codemirror/theme/material-ocean.css')
    return import('react-codemirror')
}, {ssr: false})

```

## Rendering

To include the CodeMirror element within your page/component, you first need to enclose it within brackets. After that, you can include everything else such as the value, options, and the onChange event. E.G.:

```javascript

{<CodeMirror
    className="editor"
    value={devLog}
    name= "Devlog"
    options={{
      theme: 'mdn-like',
      lineNumbers: true,
      mode: 'markdown'
    }}
    onChange={devLog => setDevLog(devLog)}
/>}

```
To ensure that it everything looks right and works the way you expect it to work (not having the textarea and editor being in two separate places or a bunch of x's), you should include the following in your **_app.js** file

``` javascript

import 'codemirror/lib/codemirror.css'

```

In the end, you and your users should be able to write code or write a markdown blog using CodeMirror without having to worry about refreshing the page only to see an error.

Using CodeMirror in NextJS without the Navigator error

After Implementing Server Side Rendering using NextJS on one of my projects, I noticed that my project is now slow when navigating between pages. If users were to use this, they would wonder if the web app is working or not. With that in mind, I decided to implement a loading animation when navigating between pages.

First, I had to add redux, react-redux, and material-ui to my project using yarn.

``` javascript

yarn add redux
yarn add react-redux
yarn add @material-ui/core

```

## Actions and Reducers

After that, I had to add to my file structure two folders: actions and reducers.

### Actions

In the actions folder I added an index.js file that contained a function returning an action. Doing this allowed me to name a function that I would use to dispatch a Boolean switch to let my project know that it is loading.

``` javascript

export function setLoadingCondition() {
    return {
        type: "setLoadingCondition"
    }
}

```

### Reducers

After that I added two files in the reducers folder: loading.js and index.js.

In loading.js, I had to add a reducer (which I named loadingReducer) that has an initial state (that being false) and made sure that it recognized the type: setLoadingCondition I wrote earlier in the index.js file in the actions folder after that function had been dispatched. Once it found it, I made sure that it would return the opposite of the initial state (that being true). If that type had not been dispatched, I made sure that it returned the initial state. In the end, the loading.js file looked like this:

``` javascript

const loadingReducer = (state = false, action) => {
    switch(action.type){
        case "setLoadingCondition":
            return !state


        default: return state
    }
}


export default loadingReducer

```

In the index.js file, I had first had to import the loadingReducer I wrote in loading.js and a function called combineReducers from redux. Then I would use the combineReducers function to make sure that when I am selecting a reducer, the loadingReducer could be recognized as just loading for simplicity. That would end up in a const called allReducers, which would be used later. In the end, the index.js file in the reducers folder looked like this:

``` javascript

import loadingReducer from './loading'
import {combineReducers} from 'redux'


const allReducers = combineReducers({
    loading: loadingReducer
})


export default allReducers

```

## Tying the action and Reducer into the project

### _app.js

In the _app.js file I had to make sure that NextJS recognized the fact that my redux and react-redux were being used. First I had to import Provider tag from react-redux. After that, I had put the Component tag within the Provider tag. With the Provider tag wrapped around the Component tag, I had to make sure that Provider was aware of the reducer I created. With that in mind, I had to import createStore from redux and the allReducer I made earlier. In a const I called store, I used the createStore function to utilize allReducer. The store would then be in the Provider tag in an attribute that was also called store. In the end, _app.js looked something like this:

``` javascript

import {createStore} from 'redux'
import allReducer from '../reducers'
import {Provider} from 'react-redux'
export default function MyApp({ Component, pageProps }) {


    const store = createStore(allReducer);

    return <Provider store={store}><Component {...pageProps} /></Provider>

 
}
    
```

## Implementing the reducer and the loading animation

In the components that allow me to navigate between different pages I had to import a hook from react-redux called useDispatch, and setLoadingCondition I made earlier from the index.js file in the actions folder. I then created a const called dispatch which used the useDispatch hook for simplicity reasons. On the element within a Link tag, I added an onClick event allowing me to dispatch the setLoadingCondition function to make sure that project knows that it is loading. On the pages I imported a hook from react-redux called useSelector and a LinearProgress tag from @material-ui/core. In a const I called loading, I used the useSelector hook to select the loadingReducer that was known as loading for simplicity. In the DOM, I made a function that checked to see if the page was loading. If it was then loading would be true. If loading was true, I wrapped a div tag around the LinearProgress tag. Since the amount of data would increase, I had to make sure that the LinearProgress could be seen while scrolling. To do this, I added a className to the div tag so that I could customize it in a css file. Here is what I added to my files:

component:

``` javascript

// import statements

import {useDispatch} from 'react-redux'
import {setLoadingCondition} from '../../actions'

//const

const dispatch = useDispatch()

//DOM

return (
  <Link href={`/project?title=${props.id}`}><h1 onClick={() => dispatch(setLoadingCondition())} className={styles.displaytitle}><strong>{props.project}</strong></h1></Link>
)

```

page:

``` javascript

// import statements

import {useSelector} from 'react-redux'
import {LinearProgress} from '@material-ui/core'

//const

const loading = useSelector(state => state.loading)

//DOM

return (
{loading && <div className="loading"><LinearProgress /></div>}
)

```

css file:

``` javascript

.loading {
  position: fixed;
  top: 0;
  width: -webkit-fill-available;
  width: -moz-available;
  z-index: 3;
}

```

Because of Redux, my project now has a loading animation.

![My project with a loading animation](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/kodenshare%2Floadinganimation.gif?alt=media&token=24c2b7cf-55f4-4a34-9f5e-5b8161c21136)

[Here's the final result](https://kodenshare.site)

Blog

Adding/Enabling Extensions in PHP using Windows

Rewriting an ExpressJS app as a NextJS app (Part 3)

Rewriting an ExpressJS app as a NextJS app (Day 3: Implementing MongoDB and adding CRUD Functions)

Fixing the overwrite error

Rewriting an ExpressJS app as a NextJS app (Part 2)

Recycling old components

Rewriting an ExpressJS app as a NextJS app (Part 1: authentication)

How to parse fetched markdown in NextJS with Syntax Highlighting

Using CodeMirror in NextJS without the Navigator error

Adding a Loading animation to NextJS using React-Redux