Coder Social home page Coder Social logo

json-server-heroku's Introduction

Deploy json-server to heroku

Instructions on how to implement full fake REST API [json-server] (https://github.com/typicode/json-server) on Heroku hosting site. Should only be used for development purposes, but it can act as a simpler database for smaller applications.

Create your database

  1. Press the green Use this template button in the right corner.
  2. Give your new repo a name and press the green Create repository from template button.
  3. Clone your newly created repository to your computer.
  4. Change the contents of db.json to your own content according to the json-server example and then commit your changes to git locally.

This example will create /posts route , each resource will have id, title and content. id will auto increment!

{
  "posts": [
    {
      "id": 0,
      "title": "First post!",
      "content": "My first content!"
    }
  ]
}

Deploy to Heroku

Heroku

Heroku is a free hosting service for hosting small projects. Easy setup and deploy from the command line via git.

Pros
  • Easy setup
  • Free
Cons
  • App has to sleep a couple of hours every day.
  • "Powers down" after 30 mins of inactivity. Starts back up when you visit the site but it takes a few extra seconds. Can maybe be solved with Kaffeine

Install Heroku

1 . Create your database

2 . Create an account on
https://heroku.com

3 . Install the Heroku CLI on your computer:
https://devcenter.heroku.com/articles/heroku-cli

4 . Connect the Heroku CLI to your account by writing the following command in your terminal and follow the instructions on the command line:

heroku login

5 . Then create a remote heroku project, kinda like creating a git repository on GitHub. This will create a project on Heroku with a random name. If you want to name your app you have to supply your own name like heroku create project-name:

heroku create my-cool-project

6 . Update the remote’s details. Replace my-cool-project with the name of the project:

heroku git:remote -a my-cool-project

7 . Push your app to Heroku (you will see a wall of code):

git push heroku master

8 . Visit your newly create app by opening it via heroku:

heroku open

9 . For debugging if something went wrong:

heroku logs --tail

How it works

Heroku will look for a startup-script, this is by default npm start so make sure you have that in your package.json (assuming your script is called server.js):

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

You also have to make changes to the port, you can't hardcode a dev-port. But you can reference herokus port. So the code will have the following:

const port = process.env.PORT || 3000;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.