One place for hosting & domains

      Platform

      How To Deploy a Gatsby Application to DigitalOcean App Platform


      The author selected /dev/color to receive a donation as part of the Write for DOnations program.

      Introduction

      In this tutorial, you will deploy a Gatsby application to DigitalOcean’s App Platform. App Platform is a Platform as a Service that builds, deploys, and manages apps automatically. When combined with the speed of a static site generator like Gatsby, this provides a scalable JAMStack solution that doesn’t require server-side programming.

      In this tutorial, you will create a sample Gatsby app on your local machine, push your code to GitHub, then deploy to App Platform.

      Prerequisites

      Step 1 — Creating a Gatsby Project

      In this section, you are going to create a sample Gatsby application, which you will later deploy to App Platform.

      First, clone the default Gatsby starter from GitHub. You can do that with the following command in your terminal:

      • git clone https://github.com/gatsbyjs/gatsby-starter-default

      The Gatsby starter site provides you with the boilerplate code you need to start coding your application. For more information on creating a Gatsby app, check out How To Set Up Your First Gatsby Website.

      When you are finished with cloning the repo, cd into the gatsby-starter-default directory:

      • cd gatsby-starter-default

      Then install the Node dependencies:

      After you’ve downloaded the app and installed the dependencies, open the following file in a text editor:

      You have just opened Gatsby’s config file. Here you can change metadata about your site.

      Go to the title key and change Gatsby Default Starter to Save the Whales, as shown in the following highlighted line:

      gatsby-starter-default/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Save the Whales`,
          description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
          author: `@gatsbyjs`,
        },
        plugins: [
          `gatsby-plugin-react-helmet`,
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `images`,
              path: `${__dirname}/src/images`,
            },
          },
          `gatsby-transformer-sharp`,
          `gatsby-plugin-sharp`,
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              name: `gatsby-starter-default`,
              short_name: `starter`,
              start_url: `/`,
              background_color: `#663399`,
              theme_color: `#663399`,
              display: `minimal-ui`,
              icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
          },
          // this (optional) plugin enables Progressive Web App + Offline functionality
          // To learn more, visit: https://gatsby.dev/offline
          // `gatsby-plugin-offline`,
        ],
      }
      

      Close and save the file. Now open the index file in your favorite text editor:

      To continue with the “Save the Whales” theme, replace Hi people with Adopt a whale today, change Welcome to your new Gatsby site. to Whales are our friends., and delete the last <p> tag:

      gatsby-starter-default/src/pages/index.js

      import React from "react"
      import { Link } from "gatsby"
      import { StaticImage } from "gatsby-plugin-image"
      
      import Layout from "../components/layout"
      import SEO from "../components/seo"
      
      const IndexPage = () => (
        <Layout>
          <SEO title="Home" />
          <h1>Adopt a whale today</h1>
          <p>Whales are our friends.</p>
          <StaticImage
            src="https://www.digitalocean.com/community/tutorials/images/gatsby-astronaut.png"
            width={300}
            quality={95}
            formats={["AUTO", "WEBP", "AVIF"]}
            alt="A Gatsby astronaut"
            style={{ marginBottom: `1.45rem` }}
          />
          <Link to="/page-2/">Go to page 2</Link> <br />
          <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
        </Layout>
      )
      
      export default IndexPage
      

      Save and close the file. You are going to swap out the Gatsby astronaut image with a GIF of a whale. Before you add the GIF, you will first need to create a GIF directory and download it.

      Go to the src directory and create a gifs file:

      Now navigate into your newly created gifs folder:

      Download a whales GIF from Giphy:

      • wget https://media.giphy.com/media/lqdJsUDvJnHBgM82HB/giphy.gif

      Wget is a utilty that allows you to download files from the internet. Giphy is a website that hosts GIFs.

      Next, change the name from giphy.gif to whales.gif:

      After you have changed the name of the GIF, move back to the root folder of the project and open up the index file again:

      • cd ../..
      • nano src/pages/index.js

      Now you will add the GIF to your site’s homepage. Delete the StaticImage import and element, then replace with the following highlighted lines:

      gatsby-starter-default/src/pages/index.js

      import React from "react"
      import { Link } from "gatsby"
      
      import whaleGIF from "../gifs/whales.gif"
      import Layout from "../components/layout"
      import SEO from "../components/seo"
      
      const IndexPage = () => (
        <Layout>
          <SEO title="Home" />
          <h1>Adopt a whale today</h1>
          <p>Whales are our friends.</p>
          <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
              <img src={whaleGIF} alt="Picture of Whale from BBC America" />
          </div>
          <Link to="/page-2/">Go to page 2</Link> <br />
          <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
        </Layout>
      

      Here you imported the whales GIF and included it in an image tag between the <div> element. The alt tag informs the reader where the GIF originated.

      Close and save the index file.

      Now you will run your site locally to make sure it works. From the root of your project, run the development server:

      After your site has finished building, put localhost:8000 into your browser’s search bar. You will find the following rendered in your browser:

      Front page of a Save the Whales website

      In this section, you created a sample Gatsby app. In the next section, you are going to push your code to GitHub so that it is accessible to App Platform.

      Step 2 — Pushing Your Code to GitHub

      In this section of the tutorial, you are going to commit your code to git and push it up to GitHub. From there, DigitalOcean’s App Platform will be able to access the code for your website.

      Go to the root of your project and create a new git repository:

      Next, add any modified files to git:

      Finally, commit all of your changes to git with the following command:

      • git commit -m "Initial Commit"

      This will commit this version of your app to git version control. The -m takes a string argument and uses it as a message about the commit.

      Note: If you have not set up git before on this machine, you may receive the following output:

      *** Please tell me who you are.
      
      Run
      
        git config --global user.email "you@example.com"
        git config --global user.name "Your Name"
      
      to set your account's default identity.
      Omit --global to set the identity only in this repository.
      

      Run the two git config commands to provide this information before moving on. If you would like to learn more about git, check out our How To Contribute to Open Source: Getting Started with Git tutorial.

      You will receive output like the following:

      Output

      [master 1e3317b] Initial Commit 3 files changed, 7 insertions(+), 13 deletions(-) create mode 100644 src/gifs/whales.gif

      Once you have committed the file, go to GitHub and log in. After you log in, create a new repository called gatsby-digital-ocean-app-platform. You can make the repository either private or public:

      Creating a new github repo

      After you’ve created a new repo, go back to the command line and add the remote repo address:

      • git remote set-url origin https://github.com/your_name/gatsby-digital-ocean-app-platform

      Make sure to change your_name to your username on GitHub.

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

      Finally, push your code to your newly created repo:

      Once you enter your credentials, you will receive output similar to the following:

      Output

      Counting objects: 3466, done. Compressing objects: 100% (1501/1501), done. Writing objects: 100% (3466/3466), 28.22 MiB | 32.25 MiB/s, done. Total 3466 (delta 1939), reused 3445 (delta 1926) remote: Resolving deltas: 100% (1939/1939), done. To https://github.com/your_name/gatsby-digital-ocean-app-platform * [new branch] main -> main Branch 'main' set up to track remote branch 'main' from 'origin'.

      You will now be able to access your code in your GitHub account.

      In this section you pushed your code to a remote GitHub repository. In the next section, you will deploy your Gatsby app from GitHub to App Platform.

      Step 3 — Deploying your Gatsby App on DigitalOcean App Platform

      In this step, you are going to deploy your app onto DigitalOcean App Platform. If you haven’t done so already, create a DigitalOcean account.

      Open your DigitalOcean control panel, select the Create button at the top of the screen, then select Apps from the dropdown menu:

      Go to drop down menu and select Apps

      After you have selected Apps, you are going to retrieve your repository from GitHub. Click on the GitHub icon and give DigitalOcean permission to access your repositories. It is a best practice to only select the repository that you want deployed.

      Choose the repo you want deployed

      You’ll be redirected back to DigitalOcean. Go to the Repository field and select the project and branch you want to deploy, then click Next:

      Selecting your GitHub repository on the DigitalOcean website

      Note: Below Branch there is a pre-checked box that says Autodeploy code changes. This means if you push any changes to your GitHub repository, DigitalOcean will automatically deploy those changes.

      On the next page you’ll be asked to configure your app. In your case, all of the presets are correct, so you can click on Next:

      Configuring your app

      When you’ve finished configuring your app, give it a name like save-the-whales:

      Name your app

      Once you select your name and click Next, you will go to the payment plan page. Since your app is a static site, you can choose the Starter plan, which is free:

      Choose starter plan

      Now click the Launch Starter App button. After waiting a couple of minutes, your app will be deployed.

      Navigate to the URL listed beneath the title of your app. You will find your Gatsby app successfully deployed.

      Conclusion

      In this tutorial, you created a Gatsby site with GIFs and deployed the site onto DigitalOcean App Platform. DigitalOcean App Platform is a convenient way to deploy and share your Gatsby projects. If you would like to learn more about this product, check out the official documentation for App Platform.



      Source link

      What’s New With DigitalOcean App Platform


      How to Join

      This Tech Talk is free and open to everyone. Register below to get a link to join the live stream or receive the video recording after it airs.

      Date RSVP
      February 16, 2021, 12:30 p.m.–1:30 p.m. ET

      About the Talk

      DigitalOcean App Platform continues to evolve and add new features that make it easier for developers like you to get your software deployed to the cloud.

      Join Moises Eskinazi and Philip Dougherty — product managers on the DigitalOcean Platform-as-a-Service team — to learn about the latest updates to App Platform, demos of how to utilize the features, and a sneak peak at some of the awesome features that are coming soon.

      What You’ll Learn

      • New features of DigitalOcean App Platform that have been introduced recently
      • How to leverage these features with your deployment workflow
      • App Platform features coming soon

      This Talk is Designed For

      Any developers that want to learn to build a fullstack app.

      Prerequisites

      • Basic understanding of software development fundamentals.
      • Experience deploying software to a cloud hosting environment.

      Resources

      To join the live Tech Talk, register here.



      Source link

      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