 |
VOOZH | about |
|
VOOZH | about |
The author selected Creative Commons to receive a donation as part of the Write for DOnations program.
Note: This tutorial shows how to deploy static assets and sites using React and App Platform. If you are looking to deploy a React application with dynamic, back-end code, check out the App Platform React sample in the official documentation.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
React is a popular JavaScript framework for creating front-end applications, such as user interfaces that allow users to interact with programs. Originally created by Facebook, it has gained popularity by allowing developers to create fast applications using an intuitive programming paradigm that ties JavaScript with an HTML-like syntax known as JSX.
In this series, you will build out examples of React projects to gain an understanding of this framework, giving you the knowledge you need to pursue front-end web development or start out on your way to full stack development.
Browse Series: 21 tutorials
Author of Simplifying JavaScript. Writing featured in Slate, FreeCodeCamp, and here! I like to break things and put them back together. 🛠
Former Senior Technical Editor at DigitalOcean, fiction writer and podcaster elsewhere, always searching for the next good nautical pun! Areas of expertise include Node.js, PostgreSQL, CSS, JavaScript.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
I loved every post on React! it was very well explained and easy to follow! Thank you very much for sharing your knowledge.
Greetings from TKY Japan
Every time the code gets pushed, app builds automatically, but it takes more than 20min. Is this supposed to be like that? You’ve mentioned it might take couple minutes.
This worked perfectly fine. In this demo, you had only one route “/” and it was setup. But what if there are many routes i.e “/a”, “/b”, “/c”.
is there any way to configure a wildcard route to redirect all the requests to “/”.
I followed this tutorial and it worked perfectly, but my app (React) is being started in development mode. Any idea how I can change this? I am sort of new to React so I don’t know if I have to change anything in the project. Thank you!
After doing the above, how can I connect this app to DNS? instead of the default digital ocean link shown there?
Hello! Does the HTML content generated on the server (server side rendering) or on the client side (client side rendering)?
If I try to access a sub route in my app I get a 404 error. How can I configure the app to always go trough my index.html file thus use the React routing system?
I have tried this word for word, sep for step, about half a dozen times and in each case it fails during the build with the following:
[2023-07-05 01:37:16] │ npm notice
[2023-07-05 01:37:16] │ npm notice New major version of npm available! 8.19.4 -> 9.7.2
[2023-07-05 01:37:16] │ npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.7.2
[2023-07-05 01:37:16] │ npm notice Run npm install -g npm@9.7.2 to update!
[2023-07-05 01:37:16] │ npm notice
[2023-07-05 01:37:16] │ npm ERR! code EUSAGE
[2023-07-05 01:37:16] │ npm ERR!
[2023-07-05 01:37:16] │ npm ERR! npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing.
[2023-07-05 01:37:16] │ npm ERR!
[2023-07-05 01:37:16] │ npm ERR! Invalid: lock file’s typescript@5.1.6 does not satisfy typescript@4.9.5
[2023-07-05 01:37:16] │ npm ERR!
[2023-07-05 01:37:16] │ npm ERR! Clean install a project
[2023-07-05 01:37:16] │ npm ERR!
[2023-07-05 01:37:16] │ npm ERR! Usage:
[2023-07-05 01:37:16] │ npm ERR! npm ci
[2023-07-05 01:37:16] │ npm ERR!
[2023-07-05 01:37:16] │ npm ERR! Options:
[2023-07-05 01:37:16] │ npm ERR! [-S|–save|–no-save|–save-prod|–save-dev|–save-optional|–save-peer|–save-bundle]
[2023-07-05 01:37:16] │ npm ERR! [-E|–save-exact] [-g|–global] [–global-style] [–legacy-bundling]
[2023-07-05 01:37:16] │ npm ERR! [–omit <dev|optional|peer> [–omit <dev|optional|peer> …]]
[2023-07-05 01:37:16] │ npm ERR! [–strict-peer-deps] [–no-package-lock] [–foreground-scripts]
[2023-07-05 01:37:16] │ npm ERR! [–ignore-scripts] [–no-audit] [–no-bin-links] [–no-fund] [–dry-run]
[2023-07-05 01:37:16] │ npm ERR! [-w|–workspace <workspace-name> [-w|–workspace <workspace-name> …]]
[2023-07-05 01:37:16] │ npm ERR! [-ws|–workspaces] [–include-workspace-root] [–install-links]
[2023-07-05 01:37:16] │ npm ERR!
[2023-07-05 01:37:16] │ npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
[2023-07-05 01:37:16] │ npm ERR!
[2023-07-05 01:37:16] │ npm ERR! Run “npm help ci” for more info
[2023-07-05 01:37:16] │
[2023-07-05 01:37:16] │ npm ERR! A complete log of this run can be found in:
[2023-07-05 01:37:16] │ npm ERR! /home/apps/.npm/_logs/2023-07-05T01_37_08_617Z-debug-0.log
[2023-07-05 01:37:16] │ unable to invoke layer creator
[2023-07-05 01:37:16] │ installing node_modules: exit status 1
[2023-07-05 01:37:16] │
[2023-07-05 01:37:16] │ ERROR: failed to build: exit status 1
[2023-07-05 01:37:16] │
[2023-07-05 01:37:16] │
[2023-07-05 01:37:16] │ For documentation on the buildpacks used to build your app, please see:
[2023-07-05 01:37:16] │
[2023-07-05 01:37:16] │ Node.js v0.3.6 https://do.co/apps-buildpack-node
[2023-07-05 01:37:16] │
[2023-07-05 01:37:16] │ ✘ build failed
this thing is super out of date.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
