← Back to Guides
Header image for guide: Deploying Create React App on Northflank
Profile image for Maria Alonso

By Maria Alonso

Published 13th January 2022

Deploying Create React App on Northflank

React is an open-source front-end JavaScript library for building user interfaces based on UI components. Create React App is an officially supported way to create single-page React applications and a comfortable environment for learning React. Create React App creates a frontend build pipeline but doesn’t handle backend logic or databases, so you can use it with any backend you want. For example, Node.js, Ruby on Rails, Django or Laravel.

This guide will show you how to deploy a React application on Northflank.

As source of your deployment, you have three options: either using a public React repository, a React project you have created and have in version control or the template we provide.

Deploy from a public React repository

In this section, we will deploy a public Northflank repository for Create React App. You can use this or any other public React repository of your choice which contains a Dockerfile.

  1. In your project, create a combined service. As deployment source, choose the public repository we have created as a template of Create React App. Select master branch and Dockerfile as the build option.

    • A combined service handles build and deployment of your code.

    • Port 80 will automatically be exposed with the HTTP protocol.

  2. Access the deployment via the unique code.run service URL or finish up by linking a custom domain. The React icon will be displayed and the application will be ready to be developed further.

Using a combined service is the simplest way to deploy a React application, but one build and one deployment service can also be used. The React app is the front-end and therefore would be hosted in the deployment service and the backend of your choice would be deployed on a build service.

Deploy a React repository from your version control

For this deployment option you will have to have your Git provider connected to your Northflank account. If you haven't done so already, you can find more details on how to do so here.

  1. Once your Git provider is connected, create a new combined service. Under Repository, you will see a list of your repositories from which you can choose your React project repo. Select the branch you would like to deploy initially, this can always be changed later.

  2. Under Build Options, if you have a Dockerfile configured for your project you can choose Dockerfile or if this is not the case, you can choose Buildpack.

  3. Access the deployment via the unique code.run service URL or finish up by linking a custom domain.

Deploy from a Northflank Create React App template

This deployment method will use the public repository we have created as a template of a React application and is the fastest way to get a React project bootstrapped and deployed.

  1. Create a new service and select the option to pick from one of our existing templates. Select the Create React App template.

  2. Once the template is selected, you can choose a service name and select the VCS where a new repository will be created with the template.

  3. Access the deployment via the unique code.run service URL or finish up by linking a custom domain.

Share this article with your network