Heroku – AppDividend https://appdividend.com Latest Code Tutorials Sat, 29 Dec 2018 05:04:49 +0000 en-US hourly 1 https://wordpress.org/?v=5.2.2 https://appdividend.com/wp-content/uploads/2017/08/cropped-ApDivi-32x32.png Heroku – AppDividend https://appdividend.com 32 32 How To Deploy Laravel Project On Heroku https://appdividend.com/2018/04/17/how-to-deploy-laravel-project-on-heroku/ https://appdividend.com/2018/04/17/how-to-deploy-laravel-project-on-heroku/#comments Tue, 17 Apr 2018 22:38:16 +0000 http://localhost/wordpress/?p=485 How To Deploy Laravel Project On Heroku

In this tutorial, I will show you How To Deploy Laravel Project On Heroku. In this small tutorial, I will guide you how to deploy Laravel application to the Heroku. Heroku Cloud Application Platform is a Platform as a Service (PaaS) that enables developers to run, build, and operate applications entirely in a cloud. Heroku is a public […]

The post How To Deploy Laravel Project On Heroku appeared first on AppDividend.

]]>
How To Deploy Laravel Project On Heroku

In this tutorial, I will show you How To Deploy Laravel Project On Heroku. In this small tutorial, I will guide you how to deploy Laravel application to the Heroku. Heroku Cloud Application Platform is a Platform as a Service (PaaS) that enables developers to run, build, and operate applications entirely in a cloud.

Heroku is a public PaaS (Platform as a Service) provider that makes it easy to deploy applications written using several technology stacks at no cost. Application developers all around the globe use Heroku-like services to implement and test their applications remotely without any pain.

Earn a Tech Degree and get the skills like Frontend Development or Javascript Development that can help you to launch a career. Start your free trial

Deploy Laravel Project On Heroku

Now, let us start our tutorial by installing Heroku CLI.

Step 1: Install Heroku CLI.

You can download from this link depends on your OS. I am using Mac, so I am installing via homebrew.

brew install heroku/brew/heroku

After that, verify it by the following command.

heroku --version

You will get something like this depending on your Node.js version. “heroku-cli/6.16.12-04b3626 (darwin-x64) node-v9.10.1“.

Step 2: Install Laravel Application.

Go to your terminal and install it using the following command.

composer create-project laravel/laravel herokularavel --prefer-dist

It will install the project.

Step 3: Create a Procfile.

Inside the Laravel Root folder, make a file called Procfile.

Write the following line inside the Procfile.

web: vendor/bin/heroku-php-apache2 public/

Step 4: Initialize project as Git repo.

Okay, initialize Git repo using the following command.

git init

Step 5: Logging Into Heroku From Terminal.

Go to your terminal and type the following command to enter your Heroku Credentials.

heroku login

Step 6: Create a heroku application.

Type the following command.

heroku create

It will create an application with a weird name. Mine name is mysterious-waters-55261.

Step 7: Setting a Laravel encryption key.

Type the following command to see the key.

php artisan key:generate --show

It will show the key, and you need to copy it for now.

Next step is to type the following command and does not hit the enter.

heroku config:set APP_KEY={Your copied key}

Now, hit the enter and you are set up with the Application key.

Step 8: Push the changes to Heroku.

After that add the files on Git using the following command.

git add .

Commit the changes.

git commit -m "first laravel deployment to heroku"

Push the changes to the Heroku server.

git push heroku master

You will see something like this.

Laravel Heroku Deployment

 

Step 9: Start the Application.

Type the following command to start the application on Heroku.

heroku open

This is my application Live URL: https://mysterious-waters-55261.herokuapp.com/

Step 10: Configure the Database on Heroku.

I have used Postgres Database because it is free on Heroku. So we need to use an add-on database provision provided by Heroku. You can find more on here.

Type the following command to create PGSQL database.

heroku addons:create heroku-postgresql:hobby-dev

You can more about data store on this URL.

Now, you can see your Database URL using the following command.

heroku config

It will give us two values.

  1. APP_KEY
  2. DATABASE_URL

Now, copy the DATABASE_URL and open your config  >>  database.php file.

First, change the by default database to pgsql from mysql.

Now, at the top, you need to define $DATABASE_URL = parse_url(“Your generated database URL, copy here”).

$DATABASE_URL=parse_url('Your database URL');

Next, your pgsql database config array looks like this.

// database.php

'pgsql' => [
            'driver' => 'pgsql',
            'host' => $DATABASE_URL["host"],
            'port' => $DATABASE_URL["port"],
            'database' => ltrim($DATABASE_URL["path"], "/"),
            'username' => $DATABASE_URL["user"],
            'password' => $DATABASE_URL["pass"],
            'charset' => 'utf8',
            'prefix' => '',
            'schema' => 'public',
            'sslmode' => 'require',
        ],

So, your complete database.php file looks like this.

<?php

$DATABASE_URL = parse_url('Your database URL');

return [

    /*
    |--------------------------------------------------------------------------
    | Default Database Connection Name
    |--------------------------------------------------------------------------
    |
    | Here you may specify which of the database connections below you wish
    | to use as your default connection for all database work. Of course
    | you may use many connections at once using the Database library.
    |
    */

    'default' => env('DB_CONNECTION', 'pgsql'),

    /*
    |--------------------------------------------------------------------------
    | Database Connections
    |--------------------------------------------------------------------------
    |
    | Here are each of the database connections setup for your application.
    | Of course, examples of configuring each database platform that is
    | supported by Laravel is shown below to make development simple.
    |
    |
    | All database work in Laravel is done through the PHP PDO facilities
    | so make sure you have the driver for your particular database of
    | choice installed on your machine before you begin development.
    |
    */

    'connections' => [

        'sqlite' => [
            'driver' => 'sqlite',
            'database' => env('DB_DATABASE', database_path('database.sqlite')),
            'prefix' => '',
        ],

        'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
        ],

        'pgsql' => [
            'driver' => 'pgsql',
            'host' => $DATABASE_URL["host"],
            'port' => $DATABASE_URL["port"],
            'database' => ltrim($DATABASE_URL["path"], "/"),
            'username' => $DATABASE_URL["user"],
            'password' => $DATABASE_URL["pass"],
            'charset' => 'utf8',
            'prefix' => '',
            'schema' => 'public',
            'sslmode' => 'require',
        ],

        'sqlsrv' => [
            'driver' => 'sqlsrv',
            'host' => env('DB_HOST', 'localhost'),
            'port' => env('DB_PORT', '1433'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', ''),
            'password' => env('DB_PASSWORD', ''),
            'charset' => 'utf8',
            'prefix' => '',
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Migration Repository Table
    |--------------------------------------------------------------------------
    |
    | This table keeps track of all the migrations that have already run for
    | your application. Using this information, we can determine which of
    | the migrations on disk haven't actually been run in the database.
    |
    */

    'migrations' => 'migrations',

    /*
    |--------------------------------------------------------------------------
    | Redis Databases
    |--------------------------------------------------------------------------
    |
    | Redis is an open source, fast, and advanced key-value store that also
    | provides a richer set of commands than a typical key-value systems
    | such as APC or Memcached. Laravel makes it easy to dig right in.
    |
    */

    'redis' => [

        'client' => 'predis',

        'default' => [
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'password' => env('REDIS_PASSWORD', null),
            'port' => env('REDIS_PORT', 6379),
            'database' => 0,
        ],

    ],

];

Step 11: Add the file to the heroku and run migrations.

Now, add the file to the Heroku.

git add .
git commit -m "added postgres database configuration"
git push heroku master

Now, run the migrations.

heroku run php artisan migrate

It will ask to run the migration on production and enter yes.

If all the configurations are right then you will be able to create the tables in the database.

 

Laravel Deployment On Heroku

Step 12: Create Authentication system.

Type the following command to generate Authentication scaffold.

php artisan make:auth

Add the files on the Heroku.

git add .
git commit -m "added auth scaffold"
git push heroku master

You can see that our scaffold is generated successfully. 

Okay, now you can able to register a user, and that is cool.

We have successfully deployed Laravel on Heroku and set up a database on Heroku.

That is it for deploy laravel project on heroku. Thanks for taking this tutorial.

The post How To Deploy Laravel Project On Heroku appeared first on AppDividend.

]]>
https://appdividend.com/2018/04/17/how-to-deploy-laravel-project-on-heroku/feed/ 3
How To Deploy Nodejs App To Heroku https://appdividend.com/2018/04/14/how-to-deploy-nodejs-app-to-heroku/ https://appdividend.com/2018/04/14/how-to-deploy-nodejs-app-to-heroku/#comments Sat, 14 Apr 2018 21:37:44 +0000 http://localhost/wordpress/?p=442 How To Deploy Nodejs App To Heroku

In this tutorial, we will see How To Deploy Nodejs App To Heroku. It is just a simple app. No fancy functionalities are there. I want to show you how you can deploy your Node.js application on Heroku. Heroku is a cloud platform as a service supporting several programming languages that are used as a web application deployment […]

The post How To Deploy Nodejs App To Heroku appeared first on AppDividend.

]]>
How To Deploy Nodejs App To Heroku

In this tutorial, we will see How To Deploy Nodejs App To HerokuIt is just a simple app. No fancy functionalities are there. I want to show you how you can deploy your Node.js application on HerokuHeroku is a cloud platform as a service supporting several programming languages that are used as a web application deployment model. Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. Heroku is a multi-language cloud application platform that allows developers to deploy, scale, and manage their applications.

If you want to learn more about Node.js then check out this course NodeJS – The Complete Guide (incl. MVC, REST APIs, GraphQL)

Deploy Nodejs App To Heroku

First, we need to Register on the Heroku platform. If you have not registered, then please register yourself, it is free. After that, you will redirect to your dashboard.

Step 1: Install Heroku CLI.

You can download from this link depends on your OS. I am using Mac, so I am installing via homebrew.

brew install heroku/brew/heroku

After that, verify it by the following command.

heroku --version

You will get something like this depending on your Node.js version. “heroku-cli/6.16.12-04b3626 (darwin-x64) node-v9.10.1

Step 2: Build Simple Node.js Express App.

Okay, now in your local, make a project folder.

mkdir heronode

Go into that folder.

cd heronode

Install the dependencies.

yarn add express

or 

npm install express --save

Create one file inside root called server.js.

// server.js

const express = require('express');
const app = express();
const path = require('path');

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(process.env.PORT || 4000, function(){
    console.log('Your node js server is running');
});

It is a just simple application; when you hit the root route, then you will get the index.html file in response.

Create the .env file, inside your root directory. Define the application port in it.

PORT = 8081

Also, create an index.html file inside the root.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>How to deploy node js application on Heroku</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>

  <body id="page-top">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">
        <span class="d-block d-lg-none">Start Bootstrap</span>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#education">Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#awards">Awards</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="container-fluid p-0" style="margin-top: 20px">
      <section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
        <div class="my-auto">
          <h1 class="mb-0">Krunal
            <span class="text-primary">Lathiya</span>
          </h1>
          <div class="subheading mb-5">3542 Berry Street · Cheyenne Wells, CO 80810 · (317) 585-8468 ·
            <a href="https://appdividend.com" target="_blank">appdividend.com</a>
          </div>
          <p class="mb-5">I am experienced in leveraging agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
          <ul class="list-inline list-social-icons mb-0">
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x"></i>
                  <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                </span>
              </a>
            </li>
          </ul>
        </div>
      </section>

      <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="experience">
        <div class="my-auto">
          <h2 class="mb-5">Experience</h2>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">
            <div class="resume-content mr-auto">
              <h3 class="mb-0">Senior Web Developer</h3>
              <div class="subheading mb-3">Intelitec Solutions</div>
              <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">March 2013 - Present</span>
            </div>
          </div>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">
            <div class="resume-content mr-auto">
              <h3 class="mb-0">Web Developer</h3>
              <div class="subheading mb-3">Intelitec Solutions</div>
              <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">December 2011 - March 2013</span>
            </div>
          </div>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">
            <div class="resume-content mr-auto">
              <h3 class="mb-0">Junior Web Designer</h3>
              <div class="subheading mb-3">Shout! Media Productions</div>
              <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">July 2010 - December 2011</span>
            </div>
          </div>

          <div class="resume-item d-flex flex-column flex-md-row">
            <div class="resume-content mr-auto">
              <h3 class="mb-0">Web Design Intern</h3>
              <div class="subheading mb-3">Shout! Media Productions</div>
              <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">September 2008 - June 2010</span>
            </div>
          </div>

        </div>

      </section>

      <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="education">
        <div class="my-auto">
          <h2 class="mb-5">Education</h2>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">
            <div class="resume-content mr-auto">
              <h3 class="mb-0">University of Colorado Boulder</h3>
              <div class="subheading mb-3">Bachelor of Science</div>
              <div>Computer Science - Web Development Track</div>
              <p>GPA: 3.23</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">August 2006 - May 2010</span>
            </div>
          </div>

          <div class="resume-item d-flex flex-column flex-md-row">
            <div class="resume-content mr-auto">
              <h3 class="mb-0">James Buchanan High School</h3>
              <div class="subheading mb-3">Technology Magnet Program</div>
              <p>GPA: 3.56</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">August 2002 - May 2006</span>
            </div>
          </div>

        </div>
      </section>

      <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="skills">
        <div class="my-auto">
          <h2 class="mb-5">Skills</h2>

          <div class="subheading mb-3">Programming Languages &amp; Tools</div>
          <ul class="list-inline list-icons">
            <li class="list-inline-item">
              <i class="devicons devicons-html5"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-css3"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-javascript"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-jquery"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-sass"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-less"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-bootstrap"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-wordpress"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-grunt"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-gulp"></i>
            </li>
            <li class="list-inline-item">
              <i class="devicons devicons-npm"></i>
            </li>
          </ul>

          <div class="subheading mb-3">Workflow</div>
          <ul class="fa-ul mb-0">
            <li>
              <i class="fa-li fa fa-check"></i>
              Mobile-First, Responsive Design</li>
            <li>
              <i class="fa-li fa fa-check"></i>
              Cross Browser Testing &amp; Debugging</li>
            <li>
              <i class="fa-li fa fa-check"></i>
              Cross Functional Teams</li>
            <li>
              <i class="fa-li fa fa-check"></i>
              Agile Development &amp; Scrum</li>
          </ul>
        </div>
      </section>

      <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="interests">
        <div class="my-auto">
          <h2 class="mb-5">Interests</h2>
          <p>Apart from being a web developer, I enjoy most of my time being outdoors. In the winter, I am an avid skiier and novice ice climber. During the warmer months here in Colorado, I enjoy mountain biking, free climbing, and kayaking.</p>
          <p class="mb-0">When forced indoors, I follow a number of sci-fi and fantasy genre movies and television shows, I am an aspiring chef, and I spend a large amount of my free time exploring the latest technolgy advancements in the front-end web development world.</p>
        </div>
      </section>

      <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="awards">
        <div class="my-auto">
          <h2 class="mb-5">Awards &amp; Certifications</h2>
          <ul class="fa-ul mb-0">
            <li>
              <i class="fa-li fa fa-trophy text-warning"></i>
              Google Analytics Certified Developer</li>
            <li>
              <i class="fa-li fa fa-trophy text-warning"></i>
              Mobile Web Specialist - Google Certification</li>
            <li>
              <i class="fa-li fa fa-trophy text-warning"></i>
              1<sup>st</sup>
              Place - University of Colorado Boulder - Emerging Tech Competition 2009</li>
            <li>
              <i class="fa-li fa fa-trophy text-warning"></i>
              1<sup>st</sup>
              Place - University of Colorado Boulder - Adobe Creative Jam 2008 (UI Design Category)</li>
            <li>
              <i class="fa-li fa fa-trophy text-warning"></i>
              2<sup>nd</sup>
              Place - University of Colorado Boulder - Emerging Tech Competition 2008</li>
            <li>
            <li>
              <i class="fa-li fa fa-trophy text-warning"></i>
              1<sup>st</sup>
              Place - James Buchanan High School - Hackathon 2006</li>
            <li>
              <i class="fa-li fa fa-trophy text-warning"></i>
              3<sup>rd</sup>
              Place - James Buchanan High School - Hackathon 2005</li>
          </ul>
        </div>
      </section>

    </div>
  </body>
</html>

Create a .gitignore file inside the root.

/node_modules
npm-debug.log
.DS_Store
/.env

Step 3: Run the application in local.

Okay, inside the package.json file, add the scripts.

"scripts": {
    "start": "node server.js"
}

Open the terminal in the root and type the following command.

npm start

Go to the http://localhost:4000/

heroku node tutorial

 

So basically, this application is we are going to deploy to the Heroku.

Step 4: Create Procfile

Inside the root folder, create a Procfile. It is the Heroku file in which we will define the dynos setting like after the uploaded the app, how to start the node js web server.

// Procfile

web: node server.js

Step 5: Logging Into Heroku From Terminal.

Open your terminal inside the root of the project. Type the following command to log in to your Heroku command.

heroku login

You need to log in with your registered email and password.

Step 6: Deploying Your Node App.

Initialize your project to git repo using the following command.

git init

Then type the following command.

heroku create

It will create a random name for our application. We can rename it, but let us stick with it. In my case, the name is shrouded-scrubland-21108.

Our project structure is something like this.

 

Heroku Tutorial With Example From Scratch

Next step is to add all the changes to the Heroku platform.

git add .
git commit -m "First node app deploy"

Push the changes to the server.

git push heroku master

 

Heroku CLI Tutorial

After that, you can see that we have successfully deployed our node js application.

Step 7: Open the application in live.

In your terminal, type the following command to open the application in live.

heroku open

It will open up the browser and you can see our application is running.

Live Node.js Application Running On Heroku

You can see all the logs of our application via the following command.

heroku logs

You can also verify by this command to check that our application is up and running.

heroku ps:scale web=1

You can also run on the local using the following command.

heroku local web

This time, you can see the PORT is different. http://localhost:8081/

Finally, Deploy Nodejs App To Heroku tutorial is over.

I am also putting this code on Github, so you can check it out.

Fork Me On Github

 

The post How To Deploy Nodejs App To Heroku appeared first on AppDividend.

]]>
https://appdividend.com/2018/04/14/how-to-deploy-nodejs-app-to-heroku/feed/ 5