Create Heroku Application

Creating Heroku application

To start, we’ll need to log in. Type heroku login at the command line. You should see something like:

$ heroku login
heroku: Press any key to open up the browser to login or q to exit

When we hit a key, it will show a URL and open it in the browser. If it doesn’t open, go to the URL manually. In the browser, click the “login” button. This will suffice if you’ve logged in recently, or you may be asked for our username and password. After this, we can close the window or tab. Once we’re logged in, we will be able to use all of the Heroku CLI commands.

Next, we’ll create the Heroku application and link our Git repository to it with the following command run from within the root path of our project’s Git repository:

$ heroku create
Creating app... done, intense-bayou-52717
https://intense-bayou-52717.herokuapp.com/ |
           https://git.heroku.com/intense-bayou-52717.git

Heroku will give our application a random name, such as intense-bayou-52717. The application will then have both a URL as a subdomain, such as https://intense-bayou-52717.herokuapp.com, and a new Git repository with the same root name, such as https://git.heroku.com/intense-bayou-52717.git. We can verify that the Git URL has been added to our Git repository with git remote -v.

Changing APIURL

To build the React client, we use npm from within the client directory. But first, we need to fix the APIURL variable in the App.js component. Ideally, this would feed in from a configuration file or environment variable so that we don’t have to keep changing it between deployments and running locally. Since no obvious solution was found, we just changed:

const APIURL = 'http://0.0.0.0:3000/';

to

const APIURL = '';

This will treat the URLs as relative, which is what we want when it’s being served from Heroku.

We then build the client, which essentially means to convert it from a readable source to a bundled and minimized source.

$ export GENERATE_SOURCEMAP=false
$ npm run build

> client@0.1.0 build /Users/.../langman/client
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  56.68 KB build/static/js/2.58c8dc49.chunk.js
  4.98 KB build/static/js/main.b722965a.chunk.js
  772 B build/static/js/runtime-main.cea588d5.js
  269 B build/static/css/main.5ecd60fb.chunk.css

The project was built assuming it is hosted at the server root. We can control this with the homepage field in your package.json. For example, we can add this to build it for GitHub Pages:

"homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed. We may serve it with a static server:

serve -s build

Find out more about deployment here.

Setting GENERATE_SOURCEMAP to false avoids generating debug information that could provide useful clues to hackers, but it’s an optional precaution. Some people prefer to skip it since the extra information can help with debugging and helps other developers learn from our site.

Files structure

The build takes all of the JSX and framework code and bundles it into JavaScript bundles. It also creates a CSS file and an HTML file. These files can be found in the langman/client/build directory, together with other important files, for example, robots.txt and favicon.ico were copied into build from the public subdirectory. This is the directory full of static files we want to serve so that users will be able to get the React client. By default, create-react-app makes a .gitignore file that tells git not to commit anything in that directory. This makes sense since it can be recomputed as needed. In fact, with some work, we could probably get Heroku to recompute it when we deploy. However, it’s easier just to add the files directly:

$ cd langman/client/build
$ git add . --force

The --force option overrides the .gitignore setting.