Code the Dream School

Main hub for class materials for Code the Dream’s classes

Deploying Applications on the Internet

We often start developing applications on a local machine. However, no one else can run them when the application is only on the local machine. So, we promote them to the cloud. We used to use Heroku for this purpose. Some of the Code the Dream classes and videos still make reference to Heroku. However, as of this writing, Heroku is soon to end their free service. We are now using Render.com instead for student projects. Students who want to promote their applications they to the cloud should each get themselves a free Render.com account.

A Warning on Security

Putting an application up on the web has risks. There are several steps that should be taken to harden the application against security attacks. These steps are not discussed here, but you should learn what they are and complete before promoting an application to the cloud. The required steps depend on your technology stack.

Promoting Rails and Node Applications

  1. Get your application running on your local machine. Push the application code to Github. Make sure that all your latest changes are merged into the main branch.
  2. If your application uses SQL, you must convert it to use Render Postgres before you can propagate it to Render.com. See this page for instructions on converting a Rails application to Render Postgres.
  3. Log into Render.com. Click on the New button on the upper right, and specify web service. Scroll down to the section that says Public Git Repository, and paste in the URL of your application’s Github repository. You are then prompted for an application name. You have to choose a name that is unique across all Render.com applications, maybe something like myapp1247. The URL you use to access the application would then be https://myapp1247.onrender.com.
  4. Rails applications using SQL only: Scroll down to the line that says Build Command. Edit this value. You typically want the following line:
    bin/bundle install && bin/rails db:migrate
  5. Scroll to the bottom of the page and click on the advanced button. Click on the Add Environment Variable button. Add the environment variables you need. For Node applications, these may include your MongoDB URI, your JWT secret, and perhaps other values. For Rails applications, you usually have to add the RAILS_MASTER_KEY environment variable, which has as its value the line from your Rails config/master.key file, and you may have other environment variables as well.
  6. Click on the button at the bottom that says Create Web Service. Render.com does a build, and you can watch the progress. (For the free plan, this can take 10 minutes or so, unfortunately.) Once the build completes, the application starts, and there is a blue link on the upper left, under the application title, that you can use to try it out!

Deploying React Applications

  1. Get your application running on your local machine. Push the application code to Github. Make sure that all your latest changes are merged into the main branch.
  2. Sign into Render.com and go to the dashboard.
  3. Hit the “New+” button on the upper right.
  4. Select static site from the dropdown menu.
  5. Scroll down to the section that says Public Git Repository, and enter the Github URL of your application repository.
  6. Configure your deployment:
    1. Give the app a short name. If you choose a name that is already in use, some numbers will be appended at deploy time to make it unique.
    2. Keep the root directory blank (unless you working with a monorepo, in which case, set the root to the directory where the React application resides).
    3. Set the branch to “main” or the desired deployment branch.
    4. The build command depends on build tool.
      1. Yarn: yarn run build
      2. NPM: npm run build
    5. The publish directory should be set to build.
    6. If using environmental variables, hit “Advanced”:
      1. Hit “Add Environment Variable”
      2. Copy-paste each key and value pairs from env.local file. Exclude any quote (” or ‘) marks in the fields.
  7. Hit “Create Static Site” at the bottom of the page.
  8. Render.com will start the deployment with a screen containing a terminal-like view of the deployment logs.
  9. On a successful deployment, you will be able to access the application using the blue link under the application’s title in the sub-header.