One place for hosting & domains

      Platform

      How To Deploy a React Application to DigitalOcean App Platform


      The author selected Creative Commons to receive a donation as part of the Write for DOnations program.

      Introduction

      DigitalOcean’s App Platform is a Platform as a Service (PaaS) product that lets you configure and deploy applications from a source repository. After configuring your app, DigitalOcean will build and deploy the application on every change, giving you the benefit of a full web server and deployment pipeline with minimal configuration. This can be a quick and efficient way to deploy your React applications, and if you are using React to build a site with no backend, you can use App Platform’s free tier.

      In this tutorial, you’ll deploy a React application to the DigitalOcean App Platform using the free Starter tier. You’ll build an application with Create React App, push the code to a GitHub repository, then configure the application as a DigitalOcean app. You’ll connect the app to your source code and deploy the project as a set of static files.

      By the end of this tutorial, you’ll be able to configure a React application to deploy automatically on every push to the main branch of a GitHub repository.

      Prerequisites

      Step 1 — Creating a React Project

      In this step, you’ll create a React application using Create React App and build a deployable version of it.

      To start, create a new application using Create React App on your local machine. In a terminal, run the command to build an application called digital-ocean-app:

      • npx create-react-app digital-ocean-app

      The npx command will run a Node package without downloading it to your machine. The create-react-app script will install all of the dependencies and will build a base project in the digital-ocean-app directory. For more on Create React App, check out the tutorial How To Set Up a React Project with Create React App.

      The code will download the dependencies and will create a base project. It may take a few minutes to finish. When it is complete, you will receive a success message. Your version may be slightly different if you use yarn instead of npm:

      Output

      Success! Created digital-ocean-app at your_file_path/digital-ocean-app Inside that directory, you can run several commands: npm start Starts the development server. npm build Bundles the app into static files for production. npm test Starts the test runner. npm eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd digital-ocean-app npm start Happy hacking!

      Now that you have a base project, run it locally so you can test how the project will appear on the server. First, change into the directory:

      Run the project using the npm start script:

      When the command runs, you’ll receive output with the URL for the local development server:

      Output

      Compiled successfully! You can now view digital-ocean-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.110:3000 Note that the development build is not optimized. To create a production build, use npm build.

      Open a browser to http://localhost:3000 and you’ll find your project:

      React project template running locally

      Stop the project by typing either CTRL+C or ⌘+C in the terminal.

      Now that you have a working React application, you can push the code to a GitHub repository.

      Step 2 — Pushing the Code to GitHub

      To deploy your app, App Platform retrieves your source code from a hosted code repository. In this step, you will push your React app code to a GitHub repository so that App Platform can access it later.

      Log in to your GitHub account. After you log in, create a new repository called digital-ocean-app. You can make the repository either private or public:

      New GitHub repository page

      Create React App automatically initializes your project with git, so you can set up to push the code directly to GitHub. First, add the repository that you’d like to use with the following command:

      • git remote add origin git@github.com:your_name/digital-ocean-app.git

      Next, declare that you want to push to the main branch with the following:

      Finally, push the code to your repository:

      Enter your GitHub credentials when prompted to push your code.

      When you push the code you will receive a success message. Your message will be slightly different:

      Output

      Counting objects: 22, done. Delta compression using up to 4 threads. Compressing objects: 100% (22/22), done. Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done. Total 22 (delta 0), reused 0 (delta 0) To github.com:your_name/digital-ocean-app.git 4011c66..647d2e1 main -> main

      You’ve now copied your code to the GitHub repository.

      In this step, you pushed your project to GitHub so that you can access it using DigitalOcean Apps. Next, you’ll create a new DigitalOcean App using your project and set up automatic deployment.

      Step 3 — Deploying to DigitalOcean App Platform

      In this step, you’ll deploy a React application to the DigitalOcean App Platform. You’ll connect your GitHub repository to DigitalOcean, configure the project to build, and build your initial project. After the project is live, each change will trigger a new build and update.

      By the end of this step, you’ll be able to deploy an application with continous delivery on DigitalOcean.

      To begin, log in to your DigitalOcean account and press the Create button, then select Apps:

      Create a new app page in the DigitalOcean interface

      You’ll next be prompted to link your GitHub repository. If you have not yet connected it, you will need to log in with your username and password and give DigitalOcean authorization to access your repositories:

      Link GitHub to DigitalOcean page

      Once you link your account, select the repository you’d like to connect on the GitHub authorization screen. In this case, you are using the digital-ocean-app repository, but you can connect more repositories if you would like:

      Select a repo on GitHub authorization page

      After selecting the repository, you will reconnect to the DigitalOcean interface. Select digital-ocean-app from the list of repositories, then press Next. This will connect your App directly to the GitHub repo:

      Select repo in the DigitalOcean UI

      Now that you have selected your repository, you need to configure the DigitalOcean App. In this example, the server will be based in North America by choosing New York in the Region field, and the deployment branch will be main. For your app, choose the region that is closest to your physical location:

      Select branch and location in the DigitalOcean interface

      For this tutorial, you are checking Autodeploy code changes. This will automatically rebuild your app every time you update the code.

      Press Next to move on to the Configure your app screen.

      Next, select the type of application you will run. Since React will build static assets, select Static Site from the dropdown menu in the Type field.

      Note: Create React App is not a static site generator like Gatsby, but you are using static assets, since the server does not need to run any server-side code such as Ruby or PHP. The app will use Node to run the install and build steps, but will not execute application code at the free tier.

      You also have the option to use a custom build script. But in this case, you can stick with the default npm run build command. You may want to create a custom build script if you have a different build script for a quality assurance (QA) or a production environment:

      Select Static Site on the app configuration page

      Press Next to move on to the Finalize and launch page.

      Here you can select the price plan. The free Starter tier is made for static sites, so choose that one:

      Select price option for DigitalOcean App Platform

      Press the Launch Starter App button and DigitalOcean will start building your application.

      DigitalOcean is building the application page

      The app will run the npm ci and npm build scripts in your repo. This will download all of the dependencies and create the build directory with a compiled and minified version of all of your JavaScript, HTML files, and other assets. You could also create a custom script in your package.json and update the Commands in the Components tab of your application on App Platform.

      It will take a few minutes for the build to run, but when it is finished, you will receive a success message and a link to your new site. Your link will have a unique name and will be slightly different:

      Deploy complete page

      Press Live App to access your project in the browser. It will be the same as the project you tested locally, but this will be live on the web with a secure URL:

      Live application

      Now that your project is configured, any time you make a change to the linked repository, you’ll run a new build. In this case, if you push a change to the main branch, DigitalOcean will automatically run a new deployment. There is no need to log in; it will run as soon as you push the change:

      New deploy

      In this step, you created a new DigitalOcean app on App Platform. You connected your GitHub account and configured the app to build the main branch. After configuring the application, you learned that the app will deploy a new build after every change.

      Conclusion

      DigitalOcean’s App Platform gives you a quick tool for deploying applications. With a small initial set up, your app will deploy automatically after every change. This can be used in conjunction with React to quickly get your web application up and running.

      A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.



      Source link

      How To Deploy a Flask App Using Gunicorn to App Platform


      The author selected the COVID-19 Relief Fund to receive a donation as part of the Write for DOnations program.

      Introduction

      In this guide, you will build a Python application using the Flask microframework on DigitalOcean’s App Platform. Flask is a Python-based microframework that is popular with web developers, given its lightweight nature and ease of use.

      This tutorial will focus on deploying a Flask app to App Platform using gunicorn. Gunicorn is a Python WSGI HTTP Server that uses a pre-fork worker model. By using gunicorn, you’ll be able to serve your Flask application on more than one thread.

      Prerequisites

      To complete this tutorial, you’ll need:

      Note: If you are looking for a general introduction to the Python programming language, our tutorial series, How To Code in Python, is a great place to start.

      Step 1 — Creating a Python Virtual Environment for your Project

      Before you get started, you need to set up your Python developer environment. You will install your Python requirements within a virtual environment for easier management.

      First, let’s create a project directory for our code and requirements.txt file to be stored in and change into that directory. Run the following commands:

      • mkdir flask-app
      • cd flask-app

      Next, create a directory in your home directory that you can use to store all of your virtual environments:

      Now create your virtual environment using Python:

      • python3 -m venv ~/.venvs/flask

      This will create a directory called flask within your .venvs directory. Inside, it will install a local version of Python and a local version of pip. You can use this to install and configure an isolated Python environment for your project.

      Before you install your project’s Python requirements, you need to activate the virtual environment.

      Use the following command:

      • source ~.venvs/flask/bin/activate

      Your prompt will change to indicate that you are now operating within a Python virtual environment. It will look something like this: (flask)user@host:~$.

      With your virtual environment active, install Flask and gunicorn using the local instance of pip:

      • pip install Flask gunicorn

      Note: When the virtual environment is activated (when your prompt has (flask) preceding it), use pip instead of pip3, even if you are using Python 3. The virtual environment’s copy of the tool is always named pip, regardless of the Python version.

      Now that you have the flask package installed, you will need to save this requirement and its dependencies so App Platform can install them later.

      Do this now using pip and then saving the information to a requirements.txt file:

      • pip freeze > requirements.txt

      You now have all of the software needed to start a Flask app. You are almost ready to deploy.

      Step 2 — Creating a Minimal Flask App

      In this step, you will build a standard Hello Sammy! Flask application. You won’t focus on the mechanics of Flask outside of how to deploy it to App Platform. If you wish to deploy another application, the following steps will work for a wide range of Flask applications.

      Using your favorite text editor, open a file named app.py:

      Now add the following code to the file:

      app.py

      from flask import Flask
      app = Flask(__name__)
      
      @app.route('/')
      def hello_world():
          return 'Hello Sammy!'
      

      This code is the standard Hello World example for Flask with a slight modification to say hello to your favorite shark. For more information about this file and Flask, visit the official Flask documentation.

      You have written your application code. Now you will configure the Gunicorn server.

      Step 3 — Setting Up Your Gunicorn Configuration

      Gunicorn is a Python WSGI HTTP server that many developers use to deploy their Python applications. This WSGI (Web Server Gateway Interface) is necessary because traditional web servers do not understand how to run Python applications. For your purposes, a WSGI allows you to deploy your Python applications consistently. You can also configure multiple threads to serve your Python application, should you need them. In this example, you will make your application accessible on port 8080, the standard App Platform port. You will also configure two worker-threads to serve your application.

      Open a file named gunicorn_config.py:

      Now add the following code to the file:

      gunicorn_config.py

      bind = "0.0.0.0:8080"
      workers = 2
      

      This is all you need to do to have your app run on App Platform using Gunicorn. Next, you’ll commit your code to GitHub and then deploy it.

      Step 4 — Pushing the Site to GitHub

      DigitalOcean’s App Platform deploys your code from GitHub repositories. This means that you must get your site in a git repository and then push that repository to GitHub.

      First, initialize your project directory containing your files as a git repository:

      When you work on your Flask app locally, certain files get added that are unnecessary for deployment. Let’s exclude those files using Git’s ignore list. Create a new file called .gitignore:

      Add the following code to the file:

      .gitignore

      *.pyc
      

      Save and close the file.

      Now execute the following command to add files to your repository:

      • git add app.py gunicorn_config.py requirements.txt .gitignore

      Make your initial commit:

      • git commit -m "Initial Flask App"

      Your files will commit:

      Output

      [master (root-commit) aa78a20] Initial Flask App 4 files changed, 18 insertions(+) create mode 100644 .gitignore create mode 100644 app.py create mode 100644 gunicorn_config.py create mode 100644 requirements.txt

      Open your browser and navigate to GitHub, log in with your profile, and create a new repository called flask-app. Create an empty repository without a README or license file.

      Once you’ve created the repository, return to the command line and push your local files to GitHub.

      First, add GitHub as a remote repository:

      • git remote add origin https://github.com/your_username/flask-app

      Next, rename the default branch main, to match what GitHub expects:

      Finally, push your main branch to GitHub’s main branch:

      Your files will transfer:

      Output

      Enumerating objects: 6, done. Counting objects: 100% (6/6), done. Delta compression using up to 8 threads Compressing objects: 100% (4/4), done. Writing objects: 100% (6/6), 1.20 KiB | 77.00 KiB/s, done. Total 6 (delta 0), reused 0 (delta 0) To github.com:MasonEgger/flask-app.git * [new branch] main -> main Branch 'main' set up to track remote branch 'main' from 'origin'.

      Enter your GitHub credentials when prompted to push your code.

      Your code is now on GitHub and accessible through a web browser. Now you will deploy your app to DigitalOcean’s App Platform.

      Step 5 — Deploying to DigitalOcean with App Platform

      Once you push the code, visit The App Platform Homepage and click Launch Your App. A prompt will request that you connect your GitHub account:

      Connect GitHub account

      Connect your account and allow DigitalOcean to access your repositories. You can choose to let DigitalOcean access all of your repositories or just to the ones you wish to deploy.

      Allow repository access

      Click Install and Authorize. GitHub will return you to your DigitalOcean dashboard.

      Once you’ve connected your GitHub account, select the your_account/flask-app repository and click Next.

      Choose your repository

      Next, provide your app’s name, choose a region, and ensure the main branch is selected. Then ensure that Autodeploy code changes is checked. Click Next to continue.

      Choose a name, region, and branch

      DigitalOcean will detect that your project is a Python app and will automatically populate a partial Run command.

      Python Application detected and partial run command populated

      Click the Edit link next to the Build and Run commands to complete the build command. Your completed build command needs to reference your project’s WSGI file. In this example, this is at app:apitp.

      Replace the existing command with the following:

      • gunicorn --worker-tmp-dir /dev/shm app:app

      Completing the run command

      Click Next, and App Platform will direct you to the Finalize and Launch screen. Here you’ll choose your plan. Be sure to select the plan that fits your needs, whether in Basic App or Professional App. Click Launch App at the bottom. Your app will build and deploy:

      App building and deploying

      Once your app finishes deploying, click on the link to your app provided by App Platform. This link will take you to your Hello Sammy page.

      Initial Flask App

      You now have a Flask app deployed to App Platform. Make and push any changes to GitHub, and App Platform will automatically deploy them.

      Conclusion

      In this tutorial, you set up a Flask app and deployed it using DigitalOcean’s App Platform. Any changes you commit and push to your repository will trigger a new deployment. This means you can spend more time focusing on your code and expanding your application.

      You can find the example code for this tutorial in the DigitalOcean Sample Images Repository.

      The example in this tutorial is a minimal Flask app. Your project might have more applications and features, but the deployment process will be the same.



      Source link

      How To Deploy a Next.js App to App Platform


      Next.js is one-of-a-kind framework built on top of React. It lets you build React apps quickly because it comes with features like Image Optimization, Zero Config, Incremental Static Generation, File-system Routing, Code-splitting and Bundling and more.

      Next.js deployment is unique in that it lets you deploy a couple different ways:

      • Static Export: You can create all the HTML pages for your site. By generating all of your HTML pages, you can serve static files, which guarantees a fast experience across the entire site. This is a good solution if you have fewer pages and aren’t worried about build times to export your pages to HTML.
      • Custom Server: You can deploy a Node server that will dynamically generate pages or serve static ones. In larger sites, creating a static export of every page can be a time-consuming process. The dynamic approach is good for when you have thousands of pages and don’t want to wait for long build times during a Static Export.

      For large sites, a Static Export may not be the best solution. Static Exports can take a long time for sites that have thousands of pages like e-commerce sites or large blogs. A Node.js Custom Server lets you do static incremental regeneration. Instead of generating your entire site’s HTML at once, you can generate pages on the fly. This is beneficial because you don’t have to wait to build/export your entire site; you can generate it as users visit each page.

      In this tutorial, you will deploy a Next.js application to DigitalOcean’s App Platform using a Static Export and a Custom Server. App Platform is a Platform as a Service (PaaS) that lets you deploy applications from a GitHub repo.

      Prerequisites

      To complete this tutorial, you will need:

      Creating a Basic Next.js Application

      You’ll need a Next.js application to deploy to App Platform, so in this step you’ll create one with create-next-app, the CLI tool to generate new starter Next.js apps. You can also find the completed app at the DigitalOcean Community GitHub repository.

      First, create the Next.js app with the create-next-app command using npx:

      • npx create-next-app my-next-app

      This creates the my-next-app directory, initializes the directory as a Git repository, and makes an initial commit:

      Output

      npx: installed 1 in 2.201s Creating a new Next.js app in /Users/brianhogan/Dropbox/work/do/articles/67580_next_app_platform/my-next-app. Installing react, react-dom, and next using npm... ... Initialized a git repository. Success! Created my-next-app at /Users/brianhogan/Dropbox/work/do/articles/67580_next_app_platform/my-next-app Inside that directory, you can run several commands: npm run dev Starts the development server. npm run build Builds the app for production. npm start Runs the built app in production mode. We suggest that you begin by typing: cd my-next-app npm run dev

      Switch to the my-next-app directory:

      DigitalOcean App Platform deploys your code from GitHub repositories, so you’ll need to push your local repository to GitHub. The create-next-app command already made an initial commit, so you don’t have to commit your files first.

      Open your browser and navigate to GitHub, log in with your profile, and create a new repository called sharkopedia. Create an empty repository without a README or license file.

      Once you’ve created the repository, return to the command line to push your local files to GitHub.

      First, add GitHub as a remote repository:

      • git remote add origin https://github.com/your_username/my-next-app

      Next, rename the default branch main, to match what GitHub expects:

      Finally, push your main branch to GitHub’s main branch:

      Your files will transfer.

      With your files in GitHub, you can deploy your app. First, you’ll deploy your app as a static site.

      Deploying Next.js as a Static Site

      To deploy the Next.js app to App Platform as a Static Site, you’ll use Next’s built-in commands to generate all of your HTML files. You first call next build, followed by next export. To make it easier, create a single npm run export command that calls both.

      Open package.json in your editor and add the following export script to the file:

      "scripts": {
          "dev": "next dev",
          "build": "next build",
          "start": "next start",
          "export": "npm run build && next export -o _static"
      },
      

      The export command runs npm run build first, which in turn runs next build. It then runs next export. App Platform looks for HTML files in a _static folder, so this command uses the -o switch to create the folder that App Platform wants to see and populate it with the static files.

      You can run this command locally and see the new _static folder.

      The command generates the files:

      Output

      info - Creating an optimized production build info - Compiled successfully info - Collecting page data info - Finalizing page optimization Page Size First Load JS ┌ ○ / 3.44 kB 65 kB ├ └ css/9a89afcbe95084ea8b90.css 703 B ├ /_app 0 B 61.6 kB ├ ○ /404 3.44 kB 65 kB └ λ /api/hello 0 B 61.6 kB + First Load JS shared by all 61.6 kB ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ca31a7.js 11.3 kB ├ chunks/framework.9116e7.js 41.8 kB ├ chunks/main.d1e355.js 7.3 kB ├ chunks/pages/_app.333f97.js 529 B ├ chunks/webpack.e06743.js 751 B └ css/6e9ef204d6fd7ac61493.css 194 B

      You now have to commit your code to GitHub so that you can update your GitHub repo for deploying to App Platform.

      First, add the _static folder to the .gitignore file so you don’t check it in. Open .gitignore in your editor and add these lines to the end:

      .gitignore

      # static folder for DigitalOcean App Platform
      _static
      

      Save the file and return to your terminal.

      Run the following command to add the changed files:

      Create a commit:

      • git commit -m "adding export command"

      Push the code to GitHub:

      Once the code is pushed, go into your DigitalOcean App Platform Dashboard and create a new app by pressing the Create App button.

      Select the GitHub repository that contains your app and press Next:

      Choose your repository

      Choose the region you and your customers are closest to, and ensure that the main branch is selected. Select Autodeploy code changes to ensure that App Platform redploys your application whenever you push code changes to GitHub:

      Choose a region and branch

      App Platform will detect that you have a Node.JS app. Change the type from Web Service to Static Site. Then change the build command to use the new export command you created by entering npm run export:

      Choose Static Site

      Press Next to move to the next step.

      On the final page, select the Starter plan and press the Launch Starter App to deploy your app. You’ll see your new live URL in your dashboard.

      Your app is deployed

      Visit the link to see your site deployed.

      You have successfully deployed Next.js as a Static Site to App Platform. Next, you will see how to deploy Next.js as a Custom Server to take advantage of the Incremental Static Generation feature that Next.js offers.

      Deploying Next.js as a Custom Server

      In addition to deploying Next as a static site, you can deploy it as a custom server. This means that you are deploying a Node server that can serve pages dynamically or statically.

      The process is called incremental static regeneration. Next will wait for a user to visit a page and then generate the static HTML for that page. If a second user visits that same page, Next will serve the static file instead of generating it dynamically.

      Next already has this feature built in using its next start command in the package.json scripts. All you have to do to use it with App Platform is to pass it a host and a port. App Platform listens by default on 0.0.0.0 on port 8080.

      To configure this, update the start script in package.json and specify the port and host. Open package.json in your editor and modify the start command so it looks like the following:

      package.json

      "scripts": {
          "dev": "next dev",
          "build": "next build",
          "start": "next start -H 0.0.0.0 -p ${PORT:-8080}",
          ...
      

      Save the file.

      You now have to commit your code to GitHub so that you can update your GitHub repo for deploying to App Platform. Run the command:

      Create a commit:

      • git commit -m "Changing start command for App Platform"

      Push the code to GitHub:

      Now you can deploy this Next.js app to App Platform as a Web Service. You’ll be deploying from the same GitHub repo. The main differences are that you’ll choose Web Service instead of a Static Site and you’ll also change your build command.

      First, visit your DigitalOcean App Platform Dashboard and create a new app.

      Select your repository from GitHub:

      Choose your repository

      Then name the application, choose your region, and ensure you’re using the main branch:

      Choose name and branch

      Press Next to continue.

      Then ensure that the Type is set to Web Service. Use npm run build as the Build Command and npm start as the Start command:

      Choose Web Service

      Press Next to continue.

      Now choose the type of plan. Since this isn’t a static site, you won’t be able to use the Starter plan. Choose the Basic plan.

      Choose the 1GB Ram | 1 vCPU option for the Container, and leave the Number of Containers set to 1. Then press Launch Basic App.

      After a short time, your app is deployed. You can follow the URL displayed to visit your app in the browser.

      Your app is deployed

      As you make changes to your code and push them to your main branch on GitHub, your application will automatically redeploy.

      Conclusion

      In this tutorial, you deployed Next.js two separate ways: as a Static Site and as a Custom Server. You can use one of the two strategies depending on your app or site’s needs.

      Moving forward, you can look further into what App Platform has to offer. You may want to add a Web Service and a Database to create your own API that your Next.js app can consume, or use Next’s API Routes to create a small API. Look through the App Platform docs to see what other features you can take advantage of when building and deploying your apps.



      Source link