Have you ever wanted to deploy your full-stack application to just one place and be done with it and save all the hassle like connecting them together, configuring URLs, and cors, etc...

Deploying your application in one place can help increase your deployment speed and give you a better dev experience.

We also use the npm module `http-proxy-middleware` to proxy the backend port to the `/api/` of our domain, which makes it very easier for development and we don't even have to configure [cors](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). If you didn't understand, it's ok, you will by the end of the article.

In this article, I will show you how to deploy your react and node.js application in the same Heroku app.

For this example, we create a folder named "react-node-heroku" and inside of that, we make two folders: 1- backend. 2- frontend. type `npx create-react-app frontend` in the root folder command line to create a new react app.

Now we have a folder with two folders: one is a backend and one is for the frontend.

We want to initialize [npm](https://www.npmjs.com) in the root directory so that when we run our script in the `package.json` we can have access to both folders and run both of them at the same time.

Run `npm init -y` in your root folder. and do that for your backend folder too.

In our node server, we create a simple express server that when we go to `/api` we get a JSON response back that says "Hello World". Let's create that. Learn express [here.](https://codeforgeek.com/express-nodejs-tutorial/)

`react-node-heroku/backend/app.js`

```javascript
import express from "express"

const app = express()

app.get("/api", (req, res) => {
  res.json({ message: "Hello world" })
})

const PORT = process.env.PORT ?? 5000

app.listen(PORT, () => console.log(`Listening on port ${PORT}`))
```

## http-proxy-middleware

In our react app let's first install the module `http-proxy-middleware` so that we connect the backend to the frontend.

- Run `npm install http-proxy-middleware` in your frontend folder.
- Create a file in your `src` folder named `setupProxy.js`
- Copy this code into it.

```js
const { createProxyMiddleware } = require("http-proxy-middleware")

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  )
}
```

Basically what this code does is that any URL that goes to `http://localhost:5000/api` (which is our backend), will go to `http://localhost:3000/api` too.

So that we can access our backend on the same URL as the frontend.

After we have set up the proxy, now it's time to make a request to our backend and show the message to the DOM.

To send the request I use axios, you can use [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or the hook [useSwr](https://swr.vercel.app/) if you like.

`react-node-heroku/frontend/src/App.js`

```js
import React, { useEffect, useState } from "react"
import axios from "axios"

function App() {
  const [data, setData] = useState("")

  const getData = async () => {
    try {
      const { data } = await axios.get("/api")
      setData(data.message)
    } catch (error) {
      console.log(error.message)
    }
  }

  // get data on page load
  useEffect(() => {
    getData()
  }, [])

  return <div className="App">{data}</div>
}

export default App
```

Now let's test our app.

- Run your backend server.
- Run your frontend server.

And when you open your home page you should see a text saying "Hello world" that comes from the backend. If yours don't show that, go back and find your bug.

## Running both servers in one terminal

Ok, what if we want to run both servers in the same terminal? well, luckily there is a module for that. Run `npm install -D concurrently` include the `-D` because we only need it in the development environment.

After you installed it. Configure your scripts in your `package.json` file in your root folder.

`react-node-heroku/package.json`

```json
...
"scripts": {
    "dev": "concurrently \"npm start --prefix frontend\" \"nodemon backend/app.js\""
},
...
```

Now in your root folder, Run `npm run dev` and both servers should be up in just one terminal and work totally fine.

## Configuring your servers to a production environment

But what we have done is just for development, what about deploying in a real production environment? well, the answer is it's very simple. We just need a few tweaks here and there and it will be perfect.

In your backend app.js write this code:

`react-node-heroku/app.js`

```js
import express from "express"
import path from "path"

const app = express()

app.get("/api", (req, res) => {
  res.json({ message: "Hello world" })
})

// makes your build folder static so that it can be accesses in the server
app.use(express.static(path.resolve("frontend/build")))

// if the user makes a request to any url
// then the index.html file is sent
app.get("*", (req, res) => {
  const indexHtml = path.resolve("frontend/build/index.html")
  res.sendFile(indexHtml)
})

const PORT = process.env.PORT ?? 5000

app.listen(PORT, () => console.log(`Listening on port ${PORT}`))
```

Configure your scripts in your root folder.

`react-node-heroku/package.json`

```json
...
"scripts": {
  "start": "node backend/app.js",
	...
},
...
```

- Build your react app `npm run build`
- Run `npm run start`

Congrats you have made your full-stack react node app.

Now you can deploy it to [heroku](https://www.heroku.com) or anywhere else you like. And your application will run no matter where you deploy it.


Create your full stack app with minimum configurations.

How to host react frontend and node backend in the same heroku application


To read this article you have to have a basic understanding of how the [**useReducer**](https://reactjs.org/docs/hooks-reference.html#usereducer) hook works in react.

[**useReducer**](https://reactjs.org/docs/hooks-reference.html#usereducer) is a React hook that is used for creating, updating and using the state inside multiple components.

It also has two arguments, one takes a function which is called the **reducer function**, and the other is the initial state which returns the current state and a function to update the state called **Dispatch**, The action is mostly an object that contains the **payload** and the **action type** that we will discuss later.

```javascript
const [state, dispatch] = useReducer(reducer, initialState)
```

## Defining the Reducer function type

```ts
type Reducer<State, Action> = (state: State, action: Action) => State
```

This type declaration basically means that the reducer function takes in two arguments (that can be defined whenever the function is defined) and returns whatever type that was passed in as the state type.

Now let's create a sample useReducer

## The action

As we said, the action is an object that takes in two keys **type** and **payload**

Let's create some constants for the action types. In this example we create a counter state, that has an initial state of 0, and it has two action types, one is increase and the other is decrease.

Let's create the constants, since we use typescript we use the enum syntax to declare our variables

```ts
enum ActionType {
  increase = "INCREASE",
  decrease = "DECREASE",
}
```

The action type takes in the enum we just created and payload which is a number in our case.

```ts
type Action = {
  type: ActionType
  payload: number
}
```

Since in this small app we have only two action types (increase and decrease), so let's declare them as well.

```ts
const increase: Action = {
  type: ActionType.increase,
  payload: 1,
}

const decrease: Action = {
  type: ActionType.decrease,
  payload: 1,
}
```

## The Reducer

```ts
const reducer: Reducer<{ value: number }, Action> = (state, action) => {
  switch (action.type) {
    case ActionType.increase:
      return { ...state, value: state.value + action.payload }
    case ActionType.decrease:
      return { ...state, value: state.value - action.payload }
    default:
      return state
  }
}
```

Now use it in your react component:

```ts
const Counter: React.FC<{}> = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 })

  return (
    <div>
      Count: {state.value}
      <button onClick={() => dispatch(increase)}>Increase</button>
      <button onClick={() => dispatch(decrease)}>Decrease</button>
    </div>
  )
}
```


Use typescript and with useReducer the correct way.

How to use typescript with useReducer


#### Centering anything in css sometimes could be very difficult at times, here are some easy and simple ways for you to center your items.

There are many ways of doing this but the conventional approach is making the parent position relative and the child you want to center to position absolute, and then set the `top` and `left` properties to 50% then use the `transform` property to translate it by (`-50%`,`-50%`).

```css
.parent { 
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}

```

another approach of doing this is by using flexbox when we set the parent element to `display: flex` and then `align-items: center` and `justify-content: center`. and there you have it.

```css
.parent { 
  display: flex;
  align-items: center;
  justify-content: center;
}
```

But don't worry there's an easier way of doing this, and it's by using the grid layout.

just make the parent element display as a `grid` and `place-items: center` , there you go, you have centered it both horizontally and vertically, easy right?

```css
.parent { 
  display: grid;
  place-items: center;
}
```

Easy ways of centering elements in css

[Typescript](https://www.typescriptlang.org/) has proven its worth, especially in these recent years. We use typescript almost in every JavaScript framework, it helps us find out type errors that can happen before actually running the code. Which is a really big win for typescript.

In this article, we talk about using typescript and use its useful features with [mongoose](https://mongoosejs.com/) which is a JavaScript library to interact with a MongoDB database.

Using typescript in your project not only helps you to debug your code faster it also helps your write code faster with its autocomplete features. Once you declare a type of variable, once you use that variable again in your code, your IDE will autocomplete the fields you typed for your variable, all thanks to typescript.

## Setting up a simple project

Create a simple node project and install the dependencies by running:
`npm install typescript mongoose @types/mongoose @types/node` you have to have [nodejs](https://nodejs.org/en/) installed in your computer.

## Creating a model

In this example, we create a simple user model in mongoose and give it the types with typescript.

```ts
import mongoose from "mongoose"
// create the user type
type UserType = {
  username: string
  password: string
}
// create the schema and give it the UserType
const userSchema = new mongoose.Schema<UserType>({
  username: {
    type: String,
    required: true,
  },
  password: {
    type: String,
    required: true,
  },
})
// create the model and give it the UserType
const User = mongoose.model<UserType>("User", userSchema)
```

By creating the model like this you give it the types the model needs, basically when you query some data from the database, the data that you receive will be of the type `UserType` if it is a single document, and `UserType[]` if it is more than one document. But it doesn't give you the other methods and properties that a mongoose document should have. For example, if you do it like this and want to write this code `user.save()` then **typescript will give you a type error** because you told typescript that this document will have only username and password, so it doesn't know what is this `save()` function.

To fix this issue it's important to **extend** the `Document` type from mongoose. Change the type to this:

```ts
import mongoose, { Document } from 'mongoose'
// create the user type
interface UserType extends Document {
  username: string
  password: string
}

```

Doing it this way will help get rid of that error.

## Required fields

In the model that we created, we told mongoose that both username and password are required. **We have to tell typescript manually what is required and what's not.** For example we create another field which the user can fill out optionally, we create an age field.

```ts
interface UserType extends Document {
  username: string // required
  password: string // required
	age?: number     // not required
}

const userSchema = new mongoose.Schema<UserType>({
  username: {
    type: String,
    required: true,
  },
  password: {
    type: String,
    required: true,
  },
	age: {
		type: Number,
		required: false
	}
})
```

## Timestamps types

If we add the timestamps option to our model, in order to assign the `updatedAt` and `createdAt` fields to the model we need to **extend** `SchemaTimestampsConfig` too which is imported from mongoose.

```ts
import mongoose, { Document, SchemaTimestampsConfig } from "mongoose"

interface UserType extends Document, SchemaTimestampsConfig {
  username: string
  password: string
  age?: number
}
```

## Static methods

Sometimes we create methods to our model, in order to assign the type for that too, we have to create the method type too. First, we have to **import the Model** type from `mongoose`.

```ts
import mongoose, { Document, SchemaTimestampsConfig, Model } from "mongoose"

interface UserType extends Document, SchemaTimestampsConfig {
  username: string
  password: string
  age?: number
}

interface UserModel extends Model<UserType> {
  checkPassword(): boolean
}

// schema
const userSchema = new mongoose.Schema<UserType, UserModel>({
  // your schema here
})

// static method
userSchema.static("checkPassword", function checkPassword() {
  // your static method here
})

// model
const User = mongoose.model<UserType, UserModel>("User", userSchema)
```

## Document middlewares

For the [document middlewares](https://mongoosejs.com/docs/middleware.html) we just have to assign the type when we create the middleware, for example:

```ts
UserSchema.pre<UserType>("save", function (next) {
  if (this.isModified("password")) {
    // hash your password here
  }
})
```

## Referencing documents

Like all [relational databases](https://www.oracle.com/database/what-is-a-relational-database/) MongoDB is also relational, we can reference the documents by assigning the object id of the document in another documents field [learn more about referencing here](https://mongoosejs.com/docs/populate.html).

For this example we make another model called "Posts" to reference the author to a user:

```ts
interface PostType extends Document {
  author: UserType["_id"] // to reference the user id
}

const postSchema = new mongoose.Schema<PostType>({
  author: {
    type: mongoose.Types.ObjectId,
    ref: "User",
  },
  content: {
    type: String,
  },
})

const Post = mongoose.model<PostType>("Post", postSchema)

export default Post
```


Use mongoose with typescript to reduce errors and have a great development experience. 

Use mongoose with typescript

We all know how inconvenient the **callback hell** could be. That's why we use **async/await** to make our code more concise and more readable.

But using async/await is useless without using the `try catch` blocks, right?

Sometimes you might have no choice but to use too many `try catch` blocks that makes no better than the callback hell. You might end up creating something like this:

```js
const doThings = async () => {
  try {
    const thing1 = await doThing1()
  } catch (e) {
    console.log(e.message)
  }

  try {
    const thing2 = await doThing2()
  } catch (e) {
    console.log(e.message)
  }

  try {
    const thing3 = await doThing3()
  } catch (e) {
    console.log(e.message)
  }
}
```

This is certainly better than the callback hell, **but it could be better**.

The best approach to this is to **put everything in a function and return an array of the results and then destructure them when you call them**, for example we run the first function inside this function:

```js
const doStuff1 = async () => {
  try {
    const thing1 = await doThing1()
    return [thing1, null]
  } catch (e) {
    return [null, e.message]
  }
}
```

If we make all of our functions like this, it would be **very concise** and easier and we can even reuse the functions multiple times.

This is the **best approach**:

```js
const doThings = async () => {
  const [thing1, error1] = await doStuff1()
  const [thing2, error2] = await doStuff2()
  const [thing3, error3] = await doStuff3()
}
```


Learn the easiest and most concise way of doing async/await operations.

How to use async await syntax the cleanest way

[Form inputs](https://reactjs.org/docs/forms.html) in react are fairly easy, but sometimes we don't want our form to just be static, sometimes the number of inputs we have might change according to the situation. For example, let's say you want to create a poll and the poll will have an input for the poll name and some inputs for the options that belong to the poll.

Creating the first input (which is the name of the poll) it's very easy. But for the poll options, we don't know how many inputs we want to enter the complete data of the poll. Sometimes we have two options, and sometimes we might have 20 options or more.

For this purpose, we must make our form **dynamic** so that the user can increase the number of inputs as much as he wants, and then we store all the data in a react state, and then we can do whatever we want with it like sending it to the backend and save it in the database. In this case, handling the change of the inputs could get a little tricky.

First let's create a simple poll app with react, first by [creating a simple](https://reactjs.org/docs/create-a-new-react-app.html) react app by running `npx create-react-app` and create a simple form.

```jsx
const App = () => {
  const [pollName, setPollName] = useState("")

  return (
    <form>
      <input
        onChange={(e) => setPollName(e.target.value)}
        value={pollName}
        placeholder="Poll Name"
      />
    </form>
  )
}
```

Now let's add the option input state values as **Arrays**.

```jsx
const [options, setOptions] = useState([""])
...
```

## Mapping the dynamic inputs

In order to make our inputs **Dynamic**, we need to map all of the values in the array. And return an **Input** for each value.

```js
...
{
  options.map((option, idx) => (
    <input
      key={idx}
      // the value of the input is the value of the array at index of "idx"
      value={options[idx]}
      placeholder="Option"
    />
  ))
}
...
```

## Adding additional inputs when needed

We want to add a new input each time the user focuses on the last input so that the user will be able to add in a new option too. Add this to your

```js
<input
  ...
  onFocus={() => {
    // if the last input is focused on
    // create a new input
    if (options.length - 1 === idx) {
      setOptions((prev) => [...prev, ""])
    }
  }}
  ...
/>
```

## Setting up the dynamic input

Now this one is a bit tricky. How should we update our state without mutating the state directly? To do this is actually very simple, you just have to use the map function (which returns an array) inside the `setState` action.

```js
<input
...
  onChange={(e) =>
    setOptions(
      // update the state only when the indexes are equal
      options.map((o, id) => {
        if (id === idx) {
          return e.target.value
        }
        return o
      })
    )
  }
/>
...
```

## Putting it all together

This is how your react component should look like:

```js
const App = () => {
  const [pollName, setPollName] = useState("")
  const [options, setOptions] = useState([""])

  return (
    <form>
      <input
        onChange={(e) => setPollName(e.target.value)}
        value={pollName}
        placeholder="Poll Name"
      />
      {options.map((option, idx) => (
        <input
          key={idx}
          value={options[idx]}
          onChange={(e) =>
            setOptions(
              options.map((o, id) => {
                if (id === idx) {
                  return e.target.value
                }
                return o
              })
            )
          }
          onFocus={() => {
            if (options.length - 1 === idx) {
              setOptions((prev) => [...prev, ""])
            }
          }}
          placeholder="Option"
        />
      ))}
    </form>
  )
}
```


Create a dynamic form in react when the number of inputs is not static.

Learn to create beautiful websites with powerful backend servers

How to host react frontend and node backend in the same heroku application

How to use typescript with useReducer

Easy ways of centering elements in css

Use mongoose with typescript

How to use async await syntax the cleanest way

How to create dynamic inputs in react

Contact Us

Learn to create beautiful websites with powerful backend servers

How to host react frontend and node backend in the same heroku application

How to use typescript with useReducer

Easy ways of centering elements in css

Use mongoose with typescript

How to use async await syntax the cleanest way

How to create dynamic inputs in react