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 two options: either using a React project you have created and have in version control or the template we provide.

1. Connect your Git provider to your Northflank account. You can find more details on how to do so here.

2. 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.

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

3. 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.

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

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.

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. The React icon will be displayed and the application will be ready to be developed further.