Poppy Cooke

Poppy Cooke

1559640797

How to create a full stack React/Express/MongoDB app using Docker

In this tutorial, I will guide you through the process of containerizing a React FrontEnd, a Node / Express API, and a MongoDB database using Docker containers in a very simple way.

Why should you care about Docker?

Docker is simply one of the most important technologies at the moment. It lets you run apps inside containers that are mostly isolated from “everything”.

Each container is like an individual virtual machine stripped out of everything that is not needed to run your app. This makes containers very light, fast and secure.

Containers are also meant to be disposable. If one goes rogue, you can kill it and make another just like it with no effort thanks to the container images system.

Another thing that makes Docker great is that the app inside containers will run the same in every system (Windows, Mac, or Linux). This is awesome if you are developing in your machine and then you want to deploy it to some cloud provider like GCP or AWS.

Docker containers everywhere!

Containerizing your app with Docker is as simple as creating a Dockerfile for each of your apps to first build an image, and then running each image to get your containers live.

Containerize your Client

To build our Client image you will be needing a Dockerfile. Let’s create one:

  1. Open the React / Express App in your favorite code editor (I’m using VS Code).
  2. Navigate to the Client folder.
  3. Create a new file named Dockerfile.
  4. Place this code inside it:
# Use a lighter version of Node as a parent image
FROM mhart/alpine-node:8.11.4
# Set the working directory to /client
WORKDIR /client
# copy package.json into the container at /client
COPY package*.json /client/
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /client
COPY . /client/
# Make port 3000 available to the world outside this container
EXPOSE 3000
# Run the app when the container launches
CMD ["npm", "start"]

This will instruct docker to build an image (using these configurations) for our Client. You can read all about Dokerfile here.

Containerize your API

To build our API image you will be needing another Dockerfile. Let’s create it:

  1. Navigate to the API folder.
  2. Create a new file named Dockerfile.
  3. Place this code inside it:
# Use a lighter version of Node as a parent image
FROM mhart/alpine-node:8.11.4
# Set the working directory to /api
WORKDIR /api
# copy package.json into the container at /api
COPY package*.json /api/
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /api
COPY . /api/
# Make port 80 available to the world outside this container
EXPOSE 80
# Run the app when the container launches
CMD ["npm", "start"]

This will instruct docker to build an image (using these configurations) for our API. You can read all about Dokerfile here.

Docker Compose

You could run each individual container using the Dokerfiles. In our case we have 3 containers to manage, so we will use docker-compose instead. Compose is a tool for defining and running multi-container Docker applications.

Let me show you how simple it is to use it:

  1. Open the React/Express App in your code editor.
  2. On your App main folder, create a new file and name it docker-compose.yml.
  3. Write this code in the docker-compose.yml file:
version: "2"
services:
    client:
        image: webapp-client
        restart: always
        ports:
            - "3000:3000"
        volumes:
            - ./client:/client
            - /client/node_modules
        links:
            - api
        networks:
            webappnetwork
    api:
        image: webapp-api
        restart: always
        ports:
            - "9000:9000"
        volumes:
            - ./api:/api
            - /api/node_modules
        depends_on:
            - mongodb
        networks:
            webappnetwork

What sorcery is that?

You should read all about docker-compose here.

Basically, I’m telling Docker that I want to build a container called client, using the image **webapp-client (which is the image we defined on our Client Dockerfile) **that will be listening on port 3000. Then, I’m telling it that I want to build a container called api using the image webapp-api (which is the image we defined on our API Dockerfile) that will be listening on port 9000.

Keep in mind that there are many ways of writing a docker-compose.yml file. You should explore the documentation and use what better suits your needs.##

Add a MongoDB database

To add a MongoDB database is as simple as adding these lines of code to your docker-compose.yml file:

    mongodb:
        image: mongo
        restart: always
        container_name: mongodb
        volumes:
            - ./data-node:/data/db
        ports:
            - 27017:27017
        command: mongod --noauth --smallfiles
        networks:
            - webappnetwork

This will create a container using the official MongoDB image.

Create a shared network for your containers

To create a shared network for your container just add the following code to your docker-compose.yml file:

networks:
    webappnetwork:
        driver: bridge

Notice that you already defined each container of your app to use this network.

In the end, your docker-compose.yml file should be something like this:

docker-compose.yml

In the docker-compose.yml file, the indentation matters. Be aware of that.

Get your containers running

  1. Now that you have a docker-compose.yml** **file, let’s build your images. Go to the terminal and on your App’s main directory run:
docker-compose build

2. Now, to make Docker spin up the containers, just run:

docker-compose up

And… just like magic, you now have your Client, your API, and your Database, all running in separated containers with only one command. How cool is that?

Connect your API to MongoDB

  1. First, let’s install Mongoose to help us with the connection to MongoDB. On your terminal type:
npm install mongoose

Now create a file called testDB.js on your API routes folder and insert this code:

const express = require("express");
const router = express.Router();
const mongoose = require("mongoose");
// Variable to be sent to Frontend with Database status
let databaseConnection = "Waiting for Database response...";
router.get("/", function(req, res, next) {
    res.send(databaseConnection);
});
// Connecting to MongoDB
mongoose.connect("mongodb://mongodb:27017/test");
// If there is a connection error send an error message
mongoose.connection.on("error", error => {
    console.log("Database connection error:", error);
    databaseConnection = "Error connecting to Database";
});
// If connected to MongoDB send a success message
mongoose.connection.once("open", () => {
    console.log("Connected to Database!");
    databaseConnection = "Connected to Database";
});
module.exports = router;

Ok, let’s see what this code is doing. First, I import Express, ExpressRouter, and Mongoose to be used on our /testDB route. Then I create a variable that will be sent as a response telling what happened with the request. Then I connect to the database using Mongoose.connect(). Then I check if the connection is working or not, and change the variable (I’ve created earlier) accordingly. Finally, I use module.exports to export this route so that I’m able to use it on app.js file.

2. Now you have to “tell” Express to use that route you’ve just created. On your API folder, open the app.js file and insert this two lines of code:

var testDBRouter = require("./routes/testDB");
app.use("/testDB", testDBRouter);

This will “tell” Express that every time there is a request to the endpoint /testDB, it should use the instructions on the file testDB.js.

3. Now let’s test if everything is working properly. Go to your terminal and press control + C to bring your containers down. Then run docker-compose up to bring them back up again. After everything is up and running, if you navigate to http://localhost:9000/testDB you should see the message Connected to Database.

In the end, your app.js file should look like this:

api/app.js

Yep… it means the API is now connected to the database. But your FrontEnd doesn’t know yet. Let’s work on that now.

Make a request from React to the Database

To check if the React app can reach the Database let’s make a simple request to the endpoint you defined on the previous step.

  1. Go to your Client folder and open the App.js file.
  2. Now insert this code below the callAPI() method:
callDB() {
    fetch("http://localhost:9000/testDB")
        .then(res => res.text())
        .then(res => this.setState({ dbResponse: res }))
        .catch(err => err);
}

This method will fetch the endpoint you defined earlier on the API and retrieve the response. Then it will store the response in the state of the component

3. Add a variable to the state of the component to store the response:

dbResponse: ""

4. Inside the lifecycle method **componentDidMount(), **insert this code to execute the method you’ve just created when the component mounts:

this.callDB();

5. Finally, add another <;p> tag after the one you already have to display the response from the Database:

<p className="App-intro">{this.state.dbResponse}</p>

In the end, your App.js file should end up like this:

client/App.js

Finally, let’s see if everything is working

On your browser, go to http://localhost:3000/ and if everything is working properly, you should see these three messages :

  1. Welcome to React
  2. API is working properly
  3. Connected to Database

Something like this:

Congratulations!!!

You now have a full stack app with a React FrontEnd, a Node/Express API and a MongoDB database. All running inside individual Docker containers that are orchestrated with a simple docker-compose file.

This app can be used as a boilerplate to build your more robust app.

You can find all the code I wrote in the project repository.

#reactjs #express #mongodb #docker #node-js #web-development

What is GEEK

Buddha Community

How to create a full stack React/Express/MongoDB app using Docker

thank you so much.

Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Easter  Deckow

Easter Deckow

1655630160

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Install via pip:

$ pip install pytumblr

Install from source:

$ git clone https://github.com/tumblr/pytumblr.git
$ cd pytumblr
$ python setup.py install

Usage

Create a client

A pytumblr.TumblrRestClient is the object you'll make all of your calls to the Tumblr API through. Creating one is this easy:

client = pytumblr.TumblrRestClient(
    '<consumer_key>',
    '<consumer_secret>',
    '<oauth_token>',
    '<oauth_secret>',
)

client.info() # Grabs the current user information

Two easy ways to get your credentials to are:

  1. The built-in interactive_console.py tool (if you already have a consumer key & secret)
  2. The Tumblr API console at https://api.tumblr.com/console
  3. Get sample login code at https://api.tumblr.com/console/calls/user/info

Supported Methods

User Methods

client.info() # get information about the authenticating user
client.dashboard() # get the dashboard for the authenticating user
client.likes() # get the likes for the authenticating user
client.following() # get the blogs followed by the authenticating user

client.follow('codingjester.tumblr.com') # follow a blog
client.unfollow('codingjester.tumblr.com') # unfollow a blog

client.like(id, reblogkey) # like a post
client.unlike(id, reblogkey) # unlike a post

Blog Methods

client.blog_info(blogName) # get information about a blog
client.posts(blogName, **params) # get posts for a blog
client.avatar(blogName) # get the avatar for a blog
client.blog_likes(blogName) # get the likes on a blog
client.followers(blogName) # get the followers of a blog
client.blog_following(blogName) # get the publicly exposed blogs that [blogName] follows
client.queue(blogName) # get the queue for a given blog
client.submission(blogName) # get the submissions for a given blog

Post Methods

Creating posts

PyTumblr lets you create all of the various types that Tumblr supports. When using these types there are a few defaults that are able to be used with any post type.

The default supported types are described below.

  • state - a string, the state of the post. Supported types are published, draft, queue, private
  • tags - a list, a list of strings that you want tagged on the post. eg: ["testing", "magic", "1"]
  • tweet - a string, the string of the customized tweet you want. eg: "Man I love my mega awesome post!"
  • date - a string, the customized GMT that you want
  • format - a string, the format that your post is in. Support types are html or markdown
  • slug - a string, the slug for the url of the post you want

We'll show examples throughout of these default examples while showcasing all the specific post types.

Creating a photo post

Creating a photo post supports a bunch of different options plus the described default options * caption - a string, the user supplied caption * link - a string, the "click-through" url for the photo * source - a string, the url for the photo you want to use (use this or the data parameter) * data - a list or string, a list of filepaths or a single file path for multipart file upload

#Creates a photo post using a source URL
client.create_photo(blogName, state="published", tags=["testing", "ok"],
                    source="https://68.media.tumblr.com/b965fbb2e501610a29d80ffb6fb3e1ad/tumblr_n55vdeTse11rn1906o1_500.jpg")

#Creates a photo post using a local filepath
client.create_photo(blogName, state="queue", tags=["testing", "ok"],
                    tweet="Woah this is an incredible sweet post [URL]",
                    data="/Users/johnb/path/to/my/image.jpg")

#Creates a photoset post using several local filepaths
client.create_photo(blogName, state="draft", tags=["jb is cool"], format="markdown",
                    data=["/Users/johnb/path/to/my/image.jpg", "/Users/johnb/Pictures/kittens.jpg"],
                    caption="## Mega sweet kittens")

Creating a text post

Creating a text post supports the same options as default and just a two other parameters * title - a string, the optional title for the post. Supports markdown or html * body - a string, the body of the of the post. Supports markdown or html

#Creating a text post
client.create_text(blogName, state="published", slug="testing-text-posts", title="Testing", body="testing1 2 3 4")

Creating a quote post

Creating a quote post supports the same options as default and two other parameter * quote - a string, the full text of the qote. Supports markdown or html * source - a string, the cited source. HTML supported

#Creating a quote post
client.create_quote(blogName, state="queue", quote="I am the Walrus", source="Ringo")

Creating a link post

  • title - a string, the title of post that you want. Supports HTML entities.
  • url - a string, the url that you want to create a link post for.
  • description - a string, the desciption of the link that you have
#Create a link post
client.create_link(blogName, title="I like to search things, you should too.", url="https://duckduckgo.com",
                   description="Search is pretty cool when a duck does it.")

Creating a chat post

Creating a chat post supports the same options as default and two other parameters * title - a string, the title of the chat post * conversation - a string, the text of the conversation/chat, with diablog labels (no html)

#Create a chat post
chat = """John: Testing can be fun!
Renee: Testing is tedious and so are you.
John: Aw.
"""
client.create_chat(blogName, title="Renee just doesn't understand.", conversation=chat, tags=["renee", "testing"])

Creating an audio post

Creating an audio post allows for all default options and a has 3 other parameters. The only thing to keep in mind while dealing with audio posts is to make sure that you use the external_url parameter or data. You cannot use both at the same time. * caption - a string, the caption for your post * external_url - a string, the url of the site that hosts the audio file * data - a string, the filepath of the audio file you want to upload to Tumblr

#Creating an audio file
client.create_audio(blogName, caption="Rock out.", data="/Users/johnb/Music/my/new/sweet/album.mp3")

#lets use soundcloud!
client.create_audio(blogName, caption="Mega rock out.", external_url="https://soundcloud.com/skrillex/sets/recess")

Creating a video post

Creating a video post allows for all default options and has three other options. Like the other post types, it has some restrictions. You cannot use the embed and data parameters at the same time. * caption - a string, the caption for your post * embed - a string, the HTML embed code for the video * data - a string, the path of the file you want to upload

#Creating an upload from YouTube
client.create_video(blogName, caption="Jon Snow. Mega ridiculous sword.",
                    embed="http://www.youtube.com/watch?v=40pUYLacrj4")

#Creating a video post from local file
client.create_video(blogName, caption="testing", data="/Users/johnb/testing/ok/blah.mov")

Editing a post

Updating a post requires you knowing what type a post you're updating. You'll be able to supply to the post any of the options given above for updates.

client.edit_post(blogName, id=post_id, type="text", title="Updated")
client.edit_post(blogName, id=post_id, type="photo", data="/Users/johnb/mega/awesome.jpg")

Reblogging a Post

Reblogging a post just requires knowing the post id and the reblog key, which is supplied in the JSON of any post object.

client.reblog(blogName, id=125356, reblog_key="reblog_key")

Deleting a post

Deleting just requires that you own the post and have the post id

client.delete_post(blogName, 123456) # Deletes your post :(

A note on tags: When passing tags, as params, please pass them as a list (not a comma-separated string):

client.create_text(blogName, tags=['hello', 'world'], ...)

Getting notes for a post

In order to get the notes for a post, you need to have the post id and the blog that it is on.

data = client.notes(blogName, id='123456')

The results include a timestamp you can use to make future calls.

data = client.notes(blogName, id='123456', before_timestamp=data["_links"]["next"]["query_params"]["before_timestamp"])

Tagged Methods

# get posts with a given tag
client.tagged(tag, **params)

Using the interactive console

This client comes with a nice interactive console to run you through the OAuth process, grab your tokens (and store them for future use).

You'll need pyyaml installed to run it, but then it's just:

$ python interactive-console.py

and away you go! Tokens are stored in ~/.tumblr and are also shared by other Tumblr API clients like the Ruby client.

Running tests

The tests (and coverage reports) are run with nose, like this:

python setup.py test

Author: tumblr
Source Code: https://github.com/tumblr/pytumblr
License: Apache-2.0 license

#python #api 

Harry Patel

Harry Patel

1614145832

A Complete Process to Create an App in 2021

It’s 2021, everything is getting replaced by a technologically emerged ecosystem, and mobile apps are one of the best examples to convey this message.

Though bypassing times, the development structure of mobile app has also been changed, but if you still follow the same process to create a mobile app for your business, then you are losing a ton of opportunities by not giving top-notch mobile experience to your users, which your competitors are doing.

You are about to lose potential existing customers you have, so what’s the ideal solution to build a successful mobile app in 2021?

This article will discuss how to build a mobile app in 2021 to help out many small businesses, startups & entrepreneurs by simplifying the mobile app development process for their business.

The first thing is to EVALUATE your mobile app IDEA means how your mobile app will change your target audience’s life and why your mobile app only can be the solution to their problem.

Now you have proposed a solution to a specific audience group, now start to think about the mobile app functionalities, the features would be in it, and simple to understand user interface with impressive UI designs.

From designing to development, everything is covered at this point; now, focus on a prelaunch marketing plan to create hype for your mobile app’s targeted audience, which will help you score initial downloads.

Boom, you are about to cross a particular download to generate a specific revenue through your mobile app.

#create an app in 2021 #process to create an app in 2021 #a complete process to create an app in 2021 #complete process to create an app in 2021 #process to create an app #complete process to create an app

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Based on Statista data, the global mobile app market will generate over $935 billion in 2023 from more than $365 billion in 2018. The majority of this amount will come from in-app advertising and paid downloads. To gain a share in the marketplace, companies need to embrace new technologies to provide what consumers are looking for, such as seamless navigation and aesthetic appeal—the React Native development framework makes it all possible.

Table of Contents

  • What is Mobile App Development?
  • What are the Types of Apps?
  • What are the Components of Mobile App Architecture?
  • Things to Consider in Mobile App Development
  • What is React Native?
  • Top Reasons Why React Native is the Future of Mobile App Development
  • Useful Tips on How to Become an Excellent React Native Developer

#mobile-app-development #mobile-apps #react #react-native #android-app-development #app-development #ios-app-development #create-react-native-app

Poppy Cooke

Poppy Cooke

1559640797

How to create a full stack React/Express/MongoDB app using Docker

In this tutorial, I will guide you through the process of containerizing a React FrontEnd, a Node / Express API, and a MongoDB database using Docker containers in a very simple way.

Why should you care about Docker?

Docker is simply one of the most important technologies at the moment. It lets you run apps inside containers that are mostly isolated from “everything”.

Each container is like an individual virtual machine stripped out of everything that is not needed to run your app. This makes containers very light, fast and secure.

Containers are also meant to be disposable. If one goes rogue, you can kill it and make another just like it with no effort thanks to the container images system.

Another thing that makes Docker great is that the app inside containers will run the same in every system (Windows, Mac, or Linux). This is awesome if you are developing in your machine and then you want to deploy it to some cloud provider like GCP or AWS.

Docker containers everywhere!

Containerizing your app with Docker is as simple as creating a Dockerfile for each of your apps to first build an image, and then running each image to get your containers live.

Containerize your Client

To build our Client image you will be needing a Dockerfile. Let’s create one:

  1. Open the React / Express App in your favorite code editor (I’m using VS Code).
  2. Navigate to the Client folder.
  3. Create a new file named Dockerfile.
  4. Place this code inside it:
# Use a lighter version of Node as a parent image
FROM mhart/alpine-node:8.11.4
# Set the working directory to /client
WORKDIR /client
# copy package.json into the container at /client
COPY package*.json /client/
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /client
COPY . /client/
# Make port 3000 available to the world outside this container
EXPOSE 3000
# Run the app when the container launches
CMD ["npm", "start"]

This will instruct docker to build an image (using these configurations) for our Client. You can read all about Dokerfile here.

Containerize your API

To build our API image you will be needing another Dockerfile. Let’s create it:

  1. Navigate to the API folder.
  2. Create a new file named Dockerfile.
  3. Place this code inside it:
# Use a lighter version of Node as a parent image
FROM mhart/alpine-node:8.11.4
# Set the working directory to /api
WORKDIR /api
# copy package.json into the container at /api
COPY package*.json /api/
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /api
COPY . /api/
# Make port 80 available to the world outside this container
EXPOSE 80
# Run the app when the container launches
CMD ["npm", "start"]

This will instruct docker to build an image (using these configurations) for our API. You can read all about Dokerfile here.

Docker Compose

You could run each individual container using the Dokerfiles. In our case we have 3 containers to manage, so we will use docker-compose instead. Compose is a tool for defining and running multi-container Docker applications.

Let me show you how simple it is to use it:

  1. Open the React/Express App in your code editor.
  2. On your App main folder, create a new file and name it docker-compose.yml.
  3. Write this code in the docker-compose.yml file:
version: "2"
services:
    client:
        image: webapp-client
        restart: always
        ports:
            - "3000:3000"
        volumes:
            - ./client:/client
            - /client/node_modules
        links:
            - api
        networks:
            webappnetwork
    api:
        image: webapp-api
        restart: always
        ports:
            - "9000:9000"
        volumes:
            - ./api:/api
            - /api/node_modules
        depends_on:
            - mongodb
        networks:
            webappnetwork

What sorcery is that?

You should read all about docker-compose here.

Basically, I’m telling Docker that I want to build a container called client, using the image **webapp-client (which is the image we defined on our Client Dockerfile) **that will be listening on port 3000. Then, I’m telling it that I want to build a container called api using the image webapp-api (which is the image we defined on our API Dockerfile) that will be listening on port 9000.

Keep in mind that there are many ways of writing a docker-compose.yml file. You should explore the documentation and use what better suits your needs.##

Add a MongoDB database

To add a MongoDB database is as simple as adding these lines of code to your docker-compose.yml file:

    mongodb:
        image: mongo
        restart: always
        container_name: mongodb
        volumes:
            - ./data-node:/data/db
        ports:
            - 27017:27017
        command: mongod --noauth --smallfiles
        networks:
            - webappnetwork

This will create a container using the official MongoDB image.

Create a shared network for your containers

To create a shared network for your container just add the following code to your docker-compose.yml file:

networks:
    webappnetwork:
        driver: bridge

Notice that you already defined each container of your app to use this network.

In the end, your docker-compose.yml file should be something like this:

docker-compose.yml

In the docker-compose.yml file, the indentation matters. Be aware of that.

Get your containers running

  1. Now that you have a docker-compose.yml** **file, let’s build your images. Go to the terminal and on your App’s main directory run:
docker-compose build

2. Now, to make Docker spin up the containers, just run:

docker-compose up

And… just like magic, you now have your Client, your API, and your Database, all running in separated containers with only one command. How cool is that?

Connect your API to MongoDB

  1. First, let’s install Mongoose to help us with the connection to MongoDB. On your terminal type:
npm install mongoose

Now create a file called testDB.js on your API routes folder and insert this code:

const express = require("express");
const router = express.Router();
const mongoose = require("mongoose");
// Variable to be sent to Frontend with Database status
let databaseConnection = "Waiting for Database response...";
router.get("/", function(req, res, next) {
    res.send(databaseConnection);
});
// Connecting to MongoDB
mongoose.connect("mongodb://mongodb:27017/test");
// If there is a connection error send an error message
mongoose.connection.on("error", error => {
    console.log("Database connection error:", error);
    databaseConnection = "Error connecting to Database";
});
// If connected to MongoDB send a success message
mongoose.connection.once("open", () => {
    console.log("Connected to Database!");
    databaseConnection = "Connected to Database";
});
module.exports = router;

Ok, let’s see what this code is doing. First, I import Express, ExpressRouter, and Mongoose to be used on our /testDB route. Then I create a variable that will be sent as a response telling what happened with the request. Then I connect to the database using Mongoose.connect(). Then I check if the connection is working or not, and change the variable (I’ve created earlier) accordingly. Finally, I use module.exports to export this route so that I’m able to use it on app.js file.

2. Now you have to “tell” Express to use that route you’ve just created. On your API folder, open the app.js file and insert this two lines of code:

var testDBRouter = require("./routes/testDB");
app.use("/testDB", testDBRouter);

This will “tell” Express that every time there is a request to the endpoint /testDB, it should use the instructions on the file testDB.js.

3. Now let’s test if everything is working properly. Go to your terminal and press control + C to bring your containers down. Then run docker-compose up to bring them back up again. After everything is up and running, if you navigate to http://localhost:9000/testDB you should see the message Connected to Database.

In the end, your app.js file should look like this:

api/app.js

Yep… it means the API is now connected to the database. But your FrontEnd doesn’t know yet. Let’s work on that now.

Make a request from React to the Database

To check if the React app can reach the Database let’s make a simple request to the endpoint you defined on the previous step.

  1. Go to your Client folder and open the App.js file.
  2. Now insert this code below the callAPI() method:
callDB() {
    fetch("http://localhost:9000/testDB")
        .then(res => res.text())
        .then(res => this.setState({ dbResponse: res }))
        .catch(err => err);
}

This method will fetch the endpoint you defined earlier on the API and retrieve the response. Then it will store the response in the state of the component

3. Add a variable to the state of the component to store the response:

dbResponse: ""

4. Inside the lifecycle method **componentDidMount(), **insert this code to execute the method you’ve just created when the component mounts:

this.callDB();

5. Finally, add another <;p> tag after the one you already have to display the response from the Database:

<p className="App-intro">{this.state.dbResponse}</p>

In the end, your App.js file should end up like this:

client/App.js

Finally, let’s see if everything is working

On your browser, go to http://localhost:3000/ and if everything is working properly, you should see these three messages :

  1. Welcome to React
  2. API is working properly
  3. Connected to Database

Something like this:

Congratulations!!!

You now have a full stack app with a React FrontEnd, a Node/Express API and a MongoDB database. All running inside individual Docker containers that are orchestrated with a simple docker-compose file.

This app can be used as a boilerplate to build your more robust app.

You can find all the code I wrote in the project repository.

#reactjs #express #mongodb #docker #node-js #web-development