Jacob Banks

Jacob Banks

1574326242

How to create a MEAN App with Angular and Docker Compose?

Table of Contents

  • Why Use Docker
  • Prerequisites
  • Single Builds Approach
  • Angular Client App
  • Dockerizing Angular 2+ Client App
  • Dockerize the Express Server API
  • MongoDB container
  • Docker Compose
  • Connecting the 3 Docker containers
  • Express and MongoDb
  • Angular and Express
  • Conclusion

Docker allows us to run applications inside containers. These containers in most cases communicate with each other.

Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

We’ll build an angular app in one container, point it to an expressjs api in another container, which connects to MongoDB in another container.

If you haven’t worked with Docker before, this would be a good starting point as we will explain every step covered, in some detail.

Why Use Docker

  1. Docker images usually include only what your application needs to run. As a result, you don’t have to worry about having a whole operating system with things you will never user. This results in smaller images of your application.
  2. Platform Indipendent - I bet you’ve heard of the phrase ‘It worked on my machine, and doesn’t work on the server’. With Docker, all either environments need to have is the Docker Engine, or the Docker Daemon, and when we have a successful build of our image, it should run anywhere.
  3. Once you have an image of your application built, you can easily share the image to anyone who wants to run your application. They need not worry about dependencies, or setting up their individual environments. All they need to have is Docker Engine installed.
  4. Isolation - You’ll see from the article that I try to separate the individual apps to become indipendent, and only point to each other. The reason behind this is that each part of our entire application should be somewhat indipendent, and scalable on it’s own. Docker in this instance would make scaling these individual parts as easy as spinning up another instance of their images. This concept of building isolated, indipendenlty scalable parts of an entire system is what is called Microservices Approach.You can read more about it in Introduction to Microservices
  5. Docker images usually have tags, referring to their versions. This means you can have versioned builds of your image, enabling you to roll back to a previous version should something unexpected break.

Prerequisites

You need to have docker and docker-compose installed in your setup. Instructions for installing docker in your given platform can be found here.

Instructions for installing docker-compose can be found here.

Verify your installation by runnig

$ docker  -v
Docker version 18.09.2, build 6247962

$ docker-compose -v
docker-compose version 1.23.2, build 1110ad01

$ node -v
v11.12.0

Next, you need to know how to build a simple Angular app and an Express App. We’ll be using the Angular CLI to build a simple app.

Single Builds Approach

We’ll now separately build out these three parts of our app. The approach we are going to take is building the app in our local environment, then dockerizing the app.

Once these are running, we’ll connect the three docker containers. Note that we are only building two containers, Angular and the Express/Node API. The third container will be from a MongoDB image that we’ll just pull from the Docker Hub.

Docker Hub is a repository for docker images. It’s where we pull down official docker images such as MongoDB, NodeJs, Ubuntu, and we can also create custom images and push them to Docker Hub for other people to pull and use.

Let’s create a directory for our whole set up, we’ll call it mean-docker.

$ mkdir mean-docker

Angular Client App

Next, we’ll create an Angular app and make sure it runs in a docker container.

Create a directory called angular-client inside the mean-docker directory we created above, and initialize an Angular App with the Angular CLI.

We’ll use npx, a tool that allows us to run CLI apps without installing them into our system. It comes preinstalled when you install ndeJS since version 5.2.0

$ npx @angular/cli new angular-client

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

This scaffolds an angular app, and npm installs the app’s dependencies. Our directory structure should be like this

└── mean-docker
    └── angular-client
        ├── README.md
        ├── angular.json
        ├── e2e
        ├── node_modules
        ├── package.json
        ├── package-lock.json
        ├── src
        ├── tsconfig.json
        └── tslint.json

Running npm start, inside the angular-client directory should start the angular app at http://localhost:4200.

Dockerizing Angular 2+ Client App

To dockerize any app, we usually need to write a Dockerfile

A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.

To quickly brainstorm on what our angular app needs in order to run,

  1. We need an image with nodejs installed on it
  2. We could have the Angular CLI installed on the image, but the package.json file has it as a dependency, so it’s not a requirement.
  3. We can add our angular app into the image and install it’s dependencies.
  4. It needs to expose port 4200 so that we can access it from our host machine through localhost:4200.
  5. If all these requirements are met, we can run npm start in the container, which in turn runs ng serve since it’s a script in the package.json file, created from the image and our app should run.

Those are the exact instructions we are going to write in our Dockerfile.

mean-docker/angular-client/Dockerfile

# Create image based on the official Node 10 image from dockerhub
FROM node:10

# Create a directory where our app will be placed
RUN mkdir -p /app

# Change directory so that our commands run inside this new directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json /app/

# Install dependecies
RUN npm install

# Get all the code needed to run the app
COPY . /app/

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

I’ve commented on the file to show what each instruction clearly does.

NOTE Before we build the image, if you are keen, you may have noticed that the line COPY . /app/ copies our whole directory into the container, including node_modules. To ignore this, and other files that are irrelevant to our container, we can add a .dockerignore file and list what is to be ignored. This file is usually sometimes identical to the .gitignore file.

Create a .dockerignore file.

mean-docker/angular-client/.dockerignore

node_modules/

One last thing we have to do before building the image, is to ensure that the app is served from the host created by the docker image. To ensure this, go into your package.json and change the start script to.

mean-docker/angular-client/package.json

{
 ...
  "scripts": {
    "start": "ng serve --host 0.0.0.0",
    ...
  },
  ...
}

To build the image we will use docker build command. The syntax is

$ docker build -t <image_tag>:<tag> <directory_with_Dockerfile>

Make sure you are in the mean_docker/angular-client directory, then build your image.

$ cd angular-client
$ docker build -t angular-client:dev .

-t is a shortform of --tag, and refers to the name or tag given to the image to be built. In this case the tag will be angular-client:dev.

The . (dot) at the end refers to current directory. Docker will look for the Dockerfile in our current directory and use it to build an image.

This could take a while depending on your internet connection.

Now that the image is built, we can run a container based on that image, using this syntax

$ docker run -d --name <container_name> -p <host-port:exposed-port>  <image-name>

The -d flag tells docker to run the container in detached mode. Meaning, it will run and get you back to your host, without going into the container.

$ docker run -d --name angular-client -p 4200:4200 angular-client:dev
8310253fe80373627b2c274c5a9de930dc7559b3dc8eef4abe4cb09aa1828a22

--name refers to the name that will be assigned to the container.

-p or --port refers to which port our host machine should point to in the docker container. In this case, localhost:4200 should point to dockerhost:4200, and thus the syntax 4200:4200.

Visit localhost:4200 in your host browser should be serving the angular app from the container.

You can stop the container running with

$ docker stop angular-client

Dockerize the Express Server API

We’ve containerized the angular app, we are now two steps away from our complete set up.

Containerizing an express app should now be straight forward. Create a directory in the mean-docker directory called express-server.

$ mkdir express-server

Add the following package.json file inside the app.

mean-docker/express-server/package.json

{
  "name": "express-server",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "express": "~4.14.0"
  }
}

Then, we’ll create a simple express app inside it. Create a file server.js

 $ cd express-serve
 $ touch server.js
 $ mkdir routes && cd routes
 $ touch api.js

mean-docker/express-server/server.js

// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');

// Get our API routes
const api = require('./routes/api');

const app = express();

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Set our api routes
app.use('/', api);

// _Get port from environment and store in Express.
_**
const port = process.env.PORT || '3000';
app.set('port', port);
**
// _Create HTTP server._
const server = http.createServer(app);

/_*
 _ Listen on provided port, on all network interfaces.
 */
server.listen(port, () => console.log(`API running on localhost:${port}`));

mean_docker/express-server/routes/api.js

const express = require('express');
const router = express.Router();

/_ GET api listing. _/
router.get('/', (req, res) => {
    res.send('api works');
});

module.exports = router;

This is a simple express app, install the dependencies and start the app.

$ npm install
$ npm start

Going to localhost:3000 in your browser should serve the app.

To run this app inside a docker container, we’ll also create a Dockerfile for it. It should be pretty similar to what we already have for the angular-client.

mean-docker/express-server/Dockerfile

 # Create image based on the official Node 6 image from the dockerhub
FROM node:6

# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app

# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app

# Copy dependency definitions
COPY package.json /usr/src/app

# Install dependecies
RUN npm install

# Get all the code needed to run the app
COPY . /usr/src/app

# Expose the port the app runs in
EXPOSE 3000

# Serve the app
CMD ["npm", "start"]

You can see the file is pretty much the same as the angular-client Dockerfile, except for the exposed port.

You could also add a .dockerignore file to ignore files we do not need.

mean-docker/express-server/.dockerignore

 node_modules/

We can then build the image and run a container based on the image with.

$ docker build -t express-server:dev .
$ docker run -d --name express-server -p 3000:3000 express-server:dev

Going to localhost:3000 in your browser should serve the api.

Once you are done, you can stop the container with

$ docker stop express-server

MongoDB container

The last part of our MEAN set up, before we connect them all together is the MongoDB. Now, we can’t have a Dockerfile to build a MongoDB image, because one already exists from the Docker Hub. We only need to know how to run it.

Assuming we had a MongoDB image already, we’d run a container based on the image with

$ docker run -d --name mongodb -p 27017:27017 mongo

The image name in this instance is mongo, the last parameter, and the container name will be mongodb.

Docker will check to see if you have a mongo image already downloaded, or built. If not, it will look for the image in the Dockerhub. If you run the above command, you should have mongodb instance running inside a container.

To check if mongodb is running, simply go to http://localhost:27017 in you browser, and you should see this message. It looks like you are trying to access MongoDB over HTTP on the native driver port.

Alternatively, if you have mongo installed in your host machine, simply run mongo in the terminal. And it should run and give you the mongo shell, without any errors.

Docker Compose

To connect and run multiple containers with docker, we use Docker Compose.

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a Compose file to configure your application’s services. Then, using a single command, you create and start all the services from your configuration.

Docker compose is usually installed when you install docker. So to simply check if you have it installed, run

$ docker-compose

You should see a list of commands from docker-compose. If not, you can go through the installation here

Note: Ensure that you have docker-compose version 1.6 and above by running docker-compose -v

Create a docker-compose.yml file in the root of our set up.

$ touch docker-compose.yml

Our directory tree should now look like this.

.
├── angular-client
├── docker-compose.yml
└── express-server

Then edit the docker-compose.yml file

mean-docker/docker-compose.yml

version: '2' # specify docker-compose version

# Define the services/containers to be run
services:
  angular: # name of the first service
    build: angular-client # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding

  express: #name of the second service
    build: express-server # specify the directory of the Dockerfile
    ports:
      - "3000:3000" #specify ports forewarding

  database: # name of the third service
    image: mongo # specify image to build container from
    ports:
      - "27017:27017" # specify port forewarding

The docker-compose.yml file is a simple configuration file telling docker compose which continers to build. That’s pretty much it.

Now, to run containers based on the three images, simply run

$ docker-compose up

This will build the images if not already built, and run them. Once it’s running, and your terminal looks something like this.

Create a MEAN app with Angular and Docker Compose

You can visit all the three apps, http://localhost:4200, http://localhost:3000 or mongodb://localhost:27017, and you’ll see that all the three containers are running.

Connecting the 3 Docker containers

Finally, the fun part.

Express and MongoDb

We now finally need to connect the three containers. We’ll first create a simple CRUD feature in our api using mongoose.

First of all, add mongoose to your express server package.json

mean-docker/express-server/package.json

{
  "name": "express-server",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "express": "~4.14.0",
    "mongoose": "^4.7.0"
  }
}

We need to update our api to use mongo

mean-docker/express-server/routes/api.js

// Import dependencies
const mongoose = require('mongoose');
const express = require('express');
const router = express.Router();

// MongoDB URL from the docker-compose file
const dbHost = 'mongodb://database/mean-docker';

// Connect to mongodb
mongoose.connect(dbHost);

// create mongoose schema
const userSchema = new mongoose.Schema({
  name: String,
  age: Number
});

// create mongoose model
const User = mongoose.model('User', userSchema);

/_ GET api listing. _/
router.get('/', (req, res) => {
        res.send('api works');
});

/_ GET all users. _/
router.get('/users', (req, res) => {
    User.find({}, (err, users) => {
        if (err) res.status(500).send(error)

        res.status(200).json(users);
    });
});

/_ GET one users. _/
router.get('/users/:id', (req, res) => {
    User.findById(req.param.id, (err, users) => {
        if (err) res.status(500).send(error)

        res.status(200).json(users);
    });
});

/_ Create a user. _/
router.post('/users', (req, res) => {
    let user = new User({
        name: req.body.name,
        age: req.body.age
    });

    user.save(error => {
        if (error) res.status(500).send(error);

        res.status(201).json({
            message: 'User created successfully'
        });
    });
});

module.exports = router;

Two main differences, first of all our connection to mongo db is in the line const dbHost = 'mongodb://database/mean-docker';. This database is the same as the database service we created in the docker-compose file.

We’ve also added rest routes GET /users, GET /users/:id and POST /user.

Update the docker-compose file, telling the express service to link to the database service.

mean-docker/docker-compose.yml

version: '2' # specify docker-compose version

# Define the services/containers to be run
services:
  angular: # name of the first service
    build: angular-client # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding
    volumes:
      - ./angular-client:/app # this will enable changes made to the angular app reflect in the container

  express: #name of the second service
    build: express-server # specify the directory of the Dockerfile
    ports:
      - "3000:3000" #specify ports forewarding
    links:
      - database

  database: # name of the third service
    image: mongo # specify image to build container from
    ports:
      - "27017:27017" # specify port forewarding

The links property of the docker-compose file creates a connection to the other service with the name of the service as the host name. In this case database will be the hostname. Meaning, to connect to it frrom the express service, we should use database:27017. That’s why we made the dbHost equal to mongodb://database/mean-docker.

Also, I’ve added a volumes to the angular service. This will enable changes we make to the Angular App automatically trigger recompilation in the container

Angular and Express

The last part is to connect the Angular app to the express server. To do this, we’ll need to make some modifications to our angular app to consume the express api.

Add the Angular HTTP Client. mean-docker/angular-client/src/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // add http client module

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // import http client module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

mean-docker/angular-client/src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  // Link to our api, pointing to localhost
  API = 'http://localhost:3000';

  // Declare empty list of people
  people: any[] = [];

  constructor(private http: HttpClient) {}

  // Angular 2 Life Cycle event when component has been initialized
  ngOnInit() {
    this.getAllPeople();
  }

  // Add one person to the API
  addPerson(name, age) {
    this.http.post(`${this.API}/users`, {name, age})
      .subscribe(() => {
        this.getAllPeople();
      })
  }

  // Get all users from the API
  getAllPeople() {
    this.http.get(`${this.API}/users`)
      .subscribe((people: any) => {
        console.log(people)
        this.people = people
      })
  }
}

Angular best practices guides usually recommend separating most logic into a service/provider. We’ve placed all the code in the component here for brevity.

We’ve imported the OnInit interface, to call events when the component is initialized, then added a two methods AddPerson and getAllPeople, that call the API.

Notice that this time round, our API is pointing to localhost. This is because while the angular 2 app will be running inside the container, it’s served to the browser. And the browser is the one that makes request. It will thus make a request to the exposed express API. As a result, we don’t need to link Angular and Express in the docker-compose.yml file.

Next, we need to make some changes to the template. I first added bootstrap via cdn to the index.html

mean-docker/angular-client/src/app/index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular Client</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Then update the app.component.html template

mean-docker/angular-client/src/app/app.component.html

<!-- Bootstrap Navbar -->
<nav class="navbar navbar-light bg-faded">
  <div class="container">
    <a class="navbar-brand" href="#">Mean Docker</a>
  </div>
</nav>

<div class="container">
    <h3>Add new person</h3>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" #name>
      </div>
      <div class="form-group">
        <label for="age">Age</label>
        <input type="number" class="form-control" id="age" #age>
      </div>
      <button type="button" (click)="addPerson(name.value, age.value)" class="btn btn-primary">Add person</button>
    </form>

    <h3>People</h3>
    <!-- Bootstrap Card -->
    <div class="card card-block col-md-3" *ngFor="let person of people">
      <h4 class="card-title">{{person.name}}  {{person.age}}</h4>
    </div>
</div>

The above template shows the components properties and bindings. We are almost done.

Since we’ve made changes to our code, we need to do a build for our Docker Compose

$ docker-compose up --build

The --build flag tells docker compose that we’ve made changes and it needs to do a clean build of our images.

Once this is done, go to localhost:4200 in your browser,

Create a MEAN app with Angular and Docker Compose

We are getting a No 'Access-Control-Allow-Origin' error. To quickly fix this, we need to enable Cross-Origin in our express app. We’ll do this with a simple middleware.

mean-docker/express-server/server.js

// Code commented out for brevity

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Cross Origin middleware
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
  next()
})

// Set our api routes
app.use('/', api);

// Code commented out for brevity

We can now run docker-compose again with the build flag. You should be in the mean-docker directory

$ docker-compose up --build

Going to localhost:4200 on the browser.

Create a MEAN app with Angular and Docker Compose

Conclusion

I bet you’ve learned a thing or two about MEAN or docker and docker-compose.

The problem with our set up however is that any time we make changes to either the angular app, or the express api, we need to run docker-compose up --build.

#Angular #Docker #MongoDB #Express #Node

What is GEEK

Buddha Community

How to create a MEAN App with Angular and Docker Compose?
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

Top Enterprise Angular Web Apps Development Company in USA

AppClues Infotech is one of the leading Enterprise Angular Web Apps Development Company in USA. Our dedicated & highly experienced Angular app developers build top-grade Angular apps for your business with immersive technology & superior functionalities.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top enterprise angular web apps development company in usa #enterprise angular web apps development #hire enterprise angular web apps developers #best enterprise angular web app services #custom enterprise angular web apps solution #professional enterprise angular web apps developers

Carmen  Grimes

Carmen Grimes

1595494844

How to start an electric scooter facility/fleet in a university campus/IT park

Are you leading an organization that has a large campus, e.g., a large university? You are probably thinking of introducing an electric scooter/bicycle fleet on the campus, and why wouldn’t you?

Introducing micro-mobility in your campus with the help of such a fleet would help the people on the campus significantly. People would save money since they don’t need to use a car for a short distance. Your campus will see a drastic reduction in congestion, moreover, its carbon footprint will reduce.

Micro-mobility is relatively new though and you would need help. You would need to select an appropriate fleet of vehicles. The people on your campus would need to find electric scooters or electric bikes for commuting, and you need to provide a solution for this.

To be more specific, you need a short-term electric bike rental app. With such an app, you will be able to easily offer micro-mobility to the people on the campus. We at Devathon have built Autorent exactly for this.

What does Autorent do and how can it help you? How does it enable you to introduce micro-mobility on your campus? We explain these in this article, however, we will touch upon a few basics first.

Micro-mobility: What it is

micro-mobility

You are probably thinking about micro-mobility relatively recently, aren’t you? A few relevant insights about it could help you to better appreciate its importance.

Micro-mobility is a new trend in transportation, and it uses vehicles that are considerably smaller than cars. Electric scooters (e-scooters) and electric bikes (e-bikes) are the most popular forms of micro-mobility, however, there are also e-unicycles and e-skateboards.

You might have already seen e-scooters, which are kick scooters that come with a motor. Thanks to its motor, an e-scooter can achieve a speed of up to 20 km/h. On the other hand, e-bikes are popular in China and Japan, and they come with a motor, and you can reach a speed of 40 km/h.

You obviously can’t use these vehicles for very long commutes, however, what if you need to travel a short distance? Even if you have a reasonable public transport facility in the city, it might not cover the route you need to take. Take the example of a large university campus. Such a campus is often at a considerable distance from the central business district of the city where it’s located. While public transport facilities may serve the central business district, they wouldn’t serve this large campus. Currently, many people drive their cars even for short distances.

As you know, that brings its own set of challenges. Vehicular traffic adds significantly to pollution, moreover, finding a parking spot can be hard in crowded urban districts.

Well, you can reduce your carbon footprint if you use an electric car. However, electric cars are still new, and many countries are still building the necessary infrastructure for them. Your large campus might not have the necessary infrastructure for them either. Presently, electric cars don’t represent a viable option in most geographies.

As a result, you need to buy and maintain a car even if your commute is short. In addition to dealing with parking problems, you need to spend significantly on your car.

All of these factors have combined to make people sit up and think seriously about cars. Many people are now seriously considering whether a car is really the best option even if they have to commute only a short distance.

This is where micro-mobility enters the picture. When you commute a short distance regularly, e-scooters or e-bikes are viable options. You limit your carbon footprints and you cut costs!

Businesses have seen this shift in thinking, and e-scooter companies like Lime and Bird have entered this field in a big way. They let you rent e-scooters by the minute. On the other hand, start-ups like Jump and Lyft have entered the e-bike market.

Think of your campus now! The people there might need to travel short distances within the campus, and e-scooters can really help them.

How micro-mobility can benefit you

benefits-micromobility

What advantages can you get from micro-mobility? Let’s take a deeper look into this question.

Micro-mobility can offer several advantages to the people on your campus, e.g.:

  • Affordability: Shared e-scooters are cheaper than other mass transportation options. Remember that the people on your campus will use them on a shared basis, and they will pay for their short commutes only. Well, depending on your operating model, you might even let them use shared e-scooters or e-bikes for free!
  • Convenience: Users don’t need to worry about finding parking spots for shared e-scooters since these are small. They can easily travel from point A to point B on your campus with the help of these e-scooters.
  • Environmentally sustainable: Shared e-scooters reduce the carbon footprint, moreover, they decongest the roads. Statistics from the pilot programs in cities like Portland and Denver showimpressive gains around this key aspect.
  • Safety: This one’s obvious, isn’t it? When people on your campus use small e-scooters or e-bikes instead of cars, the problem of overspeeding will disappear. you will see fewer accidents.

#android app #autorent #ios app #mobile app development #app like bird #app like bounce #app like lime #autorent #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime

Carmen  Grimes

Carmen Grimes

1595491178

Best Electric Bikes and Scooters for Rental Business or Campus Facility

The electric scooter revolution has caught on super-fast taking many cities across the globe by storm. eScooters, a renovated version of old-school scooters now turned into electric vehicles are an environmentally friendly solution to current on-demand commute problems. They work on engines, like cars, enabling short traveling distances without hassle. The result is that these groundbreaking electric machines can now provide faster transport for less — cheaper than Uber and faster than Metro.

Since they are durable, fast, easy to operate and maintain, and are more convenient to park compared to four-wheelers, the eScooters trend has and continues to spike interest as a promising growth area. Several companies and universities are increasingly setting up shop to provide eScooter services realizing a would-be profitable business model and a ready customer base that is university students or residents in need of faster and cheap travel going about their business in school, town, and other surrounding areas.

Electric Scooters Trends and Statistics

In many countries including the U.S., Canada, Mexico, U.K., Germany, France, China, Japan, India, Brazil and Mexico and more, a growing number of eScooter users both locals and tourists can now be seen effortlessly passing lines of drivers stuck in the endless and unmoving traffic.

A recent report by McKinsey revealed that the E-Scooter industry will be worth― $200 billion to $300 billion in the United States, $100 billion to $150 billion in Europe, and $30 billion to $50 billion in China in 2030. The e-Scooter revenue model will also spike and is projected to rise by more than 20% amounting to approximately $5 billion.

And, with a necessity to move people away from high carbon prints, traffic and congestion issues brought about by car-centric transport systems in cities, more and more city planners are developing more bike/scooter lanes and adopting zero-emission plans. This is the force behind the booming electric scooter market and the numbers will only go higher and higher.

Companies that have taken advantage of the growing eScooter trend develop an appthat allows them to provide efficient eScooter services. Such an app enables them to be able to locate bike pick-up and drop points through fully integrated google maps.

List of Best Electric Bikes for Rental Business or Campus Facility 2020:

It’s clear that e scooters will increasingly become more common and the e-scooter business model will continue to grab the attention of manufacturers, investors, entrepreneurs. All this should go ahead with a quest to know what are some of the best electric bikes in the market especially for anyone who would want to get started in the electric bikes/scooters rental business.

We have done a comprehensive list of the best electric bikes! Each bike has been reviewed in depth and includes a full list of specs and a photo.

Billy eBike

mobile-best-electric-bikes-scooters https://www.kickstarter.com/projects/enkicycles/billy-were-redefining-joyrides

To start us off is the Billy eBike, a powerful go-anywhere urban electric bike that’s specially designed to offer an exciting ride like no other whether you want to ride to the grocery store, cafe, work or school. The Billy eBike comes in 4 color options – Billy Blue, Polished aluminium, Artic white, and Stealth black.

Price: $2490

Available countries

Available in the USA, Europe, Asia, South Africa and Australia.This item ships from the USA. Buyers are therefore responsible for any taxes and/or customs duties incurred once it arrives in your country.

Features

  • Control – Ride with confidence with our ultra-wide BMX bars and a hyper-responsive twist throttle.
  • Stealth- Ride like a ninja with our Gates carbon drive that’s as smooth as butter and maintenance-free.
  • Drive – Ride further with our high torque fat bike motor, giving a better climbing performance.
  • Accelerate – Ride quicker with our 20-inch lightweight cutout rims for improved acceleration.
  • Customize – Ride your own way with 5 levels of power control. Each level determines power and speed.
  • Flickable – Ride harder with our BMX /MotoX inspired geometry and lightweight aluminum package

Specifications

  • Maximum speed: 20 mph (32 km/h)
  • Range per charge: 41 miles (66 km)
  • Maximum Power: 500W
  • Motor type: Fat Bike Motor: Bafang RM G060.500.DC
  • Load capacity: 300lbs (136kg)
  • Battery type: 13.6Ah Samsung lithium-ion,
  • Battery capacity: On/off-bike charging available
  • Weight: w/o batt. 48.5lbs (22kg), w/ batt. 54lbs (24.5kg)
  • Front Suspension: Fully adjustable air shock, preload/compression damping /lockout
  • Rear Suspension: spring, preload adjustment
  • Built-in GPS

Why Should You Buy This?

  • Riding fun and excitement
  • Better climbing ability and faster acceleration.
  • Ride with confidence
  • Billy folds for convenient storage and transportation.
  • Shorty levers connect to disc brakes ensuring you stop on a dime
  • belt drives are maintenance-free and clean (no oil or lubrication needed)

**Who Should Ride Billy? **

Both new and experienced riders

**Where to Buy? **Local distributors or ships from the USA.

Genze 200 series e-Bike

genze-best-electric-bikes-scooters https://www.genze.com/fleet/

Featuring a sleek and lightweight aluminum frame design, the 200-Series ebike takes your riding experience to greater heights. Available in both black and white this ebike comes with a connected app, which allows you to plan activities, map distances and routes while also allowing connections with fellow riders.

Price: $2099.00

Available countries

The Genze 200 series e-Bike is available at GenZe retail locations across the U.S or online via GenZe.com website. Customers from outside the US can ship the product while incurring the relevant charges.

Features

  • 2 Frame Options
  • 2 Sizes
  • Integrated/Removable Battery
  • Throttle and Pedal Assist Ride Modes
  • Integrated LCD Display
  • Connected App
  • 24 month warranty
  • GPS navigation
  • Bluetooth connectivity

Specifications

  • Maximum speed: 20 mph with throttle
  • Range per charge: 15-18 miles w/ throttle and 30-50 miles w/ pedal assist
  • Charging time: 3.5 hours
  • Motor type: Brushless Rear Hub Motor
  • Gears: Microshift Thumb Shifter
  • Battery type: Removable Samsung 36V, 9.6AH Li-Ion battery pack
  • Battery capacity: 36V and 350 Wh
  • Weight: 46 pounds
  • Derailleur: 8-speed Shimano
  • Brakes: Dual classic
  • Wheels: 26 x 20 inches
  • Frame: 16, and 18 inches
  • Operating Mode: Analog mode 5 levels of Pedal Assist Thrott­le Mode

Norco from eBikestore

norco-best-electric-bikes-scooters https://ebikestore.com/shop/norco-vlt-s2/

The Norco VLT S2 is a front suspension e-Bike with solid components alongside the reliable Bosch Performance Line Power systems that offer precise pedal assistance during any riding situation.

Price: $2,699.00

Available countries

This item is available via the various Norco bikes international distributors.

Features

  • VLT aluminum frame- for stiffness and wheel security.
  • Bosch e-bike system – for their reliability and performance.
  • E-bike components – for added durability.
  • Hydraulic disc brakes – offer riders more stopping power for safety and control at higher speeds.
  • Practical design features – to add convenience and versatility.

Specifications

  • Maximum speed: KMC X9 9spd
  • Motor type: Bosch Active Line
  • Gears: Shimano Altus RD-M2000, SGS, 9 Speed
  • Battery type: Power Pack 400
  • Battery capacity: 396Wh
  • Suspension: SR Suntour suspension fork
  • Frame: Norco VLT, Aluminum, 12x142mm TA Dropouts

Bodo EV

bodo-best-electric-bikes-scootershttp://www.bodoevs.com/bodoev/products_show.asp?product_id=13

Manufactured by Bodo Vehicle Group Limited, the Bodo EV is specially designed for strong power and extraordinary long service to facilitate super amazing rides. The Bodo Vehicle Company is a striking top in electric vehicles brand field in China and across the globe. Their Bodo EV will no doubt provide your riders with high-level riding satisfaction owing to its high-quality design, strength, breaking stability and speed.

Price: $799

Available countries

This item ships from China with buyers bearing the shipping costs and other variables prior to delivery.

Features

  • Reliable
  • Environment friendly
  • Comfortable riding
  • Fashionable
  • Economical
  • Durable – long service life
  • Braking stability
  • LED lighting technology

Specifications

  • Maximum speed: 45km/h
  • Range per charge: 50km per person
  • Charging time: 8 hours
  • Maximum Power: 3000W
  • Motor type: Brushless DC Motor
  • Load capacity: 100kg
  • Battery type: Lead-acid battery
  • Battery capacity: 60V 20AH
  • Weight: w/o battery 47kg

#android app #autorent #entrepreneurship #ios app #minimum viable product (mvp) #mobile app development #news #app like bird #app like bounce #app like lime #autorent #best electric bikes 2020 #best electric bikes for rental business #best electric kick scooters 2020 #best electric kickscooters for rental business #best electric scooters 2020 #best electric scooters for rental business #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime

Custom AngularJS Web App Development Company in USA

Looking for the best custom AngularJS app development company? AppClues Infotech is a top-rated AngularJS app development company in USA producing robust, highly interactive and data-driven AngularJS web and mobile applications with advanced features & technologies.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#custom angular js web app development company in usa #best angular js app development company in usa #hire angular js app developers in usa #top angular js app development company #professional angular js app developers #leading angular js app development agency