Skip to content

Copywriting updates #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thomasdiluccio wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Copywriting updates #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5dcd4a1
Update copy of the Redis step
thomasdiluccio Apr 2, 2026
50ec2f6
Copywriting improvement of the merge-production step
thomasdiluccio Apr 3, 2026
539cbb4
Update Local step copy
thomasdiluccio Apr 3, 2026
1afb73b
Update the Branch step copy
thomasdiluccio Apr 3, 2026
f4d800c
Update final step copy
thomasdiluccio Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion frontend/src/commands.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
},
"redis": {
"user": {
"commit": "git commit -am \"Create a Redis service.\"",
"commit": "git commit -am \"Add Redis service\"",
"service_list": "upsun service:list -e staging",
"push": "upsun push"
},
"test": {
Expand All @@ -47,6 +48,7 @@
"merge_production": {
"user": {
"merge": "upsun merge",
"service_list": "upsun service:list -e main",
"resources_set": "upsun resources:set \\\n\t--count backend:2 \\\n\t--size redis_service:0.5 \\\n\t--disk backend:512,frontend:512 \\\n\t-e main",
"get_url": "upsun url --primary -e main"
},
Expand Down
32 changes: 17 additions & 15 deletions frontend/src/steps/StepBranch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,34 @@ const StepBranch: React.FC<StepBranchProps> = ({ isDisabled }) => {
>
<>
<p className="mb-2">
With Upsun, you can clone any environment to get a byte-for-byte copy
to use for staging, features, and bug fixes.
You can branch any environment to instantly create a byte-for-byte
replica of the stack (including code, database, and files) to safely
test changes, features, and bug fixes.
</p>
<p className="mb-2">
Before you make your first revision, let's create a new preview
environment called <strong>Staging</strong>.
Before you make your first revision, create a preview environment
called <strong>Staging</strong>.
</p>
<h4 className="mt-5 text-lg font-semibold">Next Step</h4>
<ol className="list-decimal list-outside ml-4 mt-2">
<li>
<p className="mb-2 mt-2">
<span>Create environment</span>
<CodeExample
copyText={commands.branch.user.branch}
codeExampleText={commands.branch.user.branch}
/>
<span className="font-semibold">Create an environment</span>
</p>
<CodeExample
copyText={commands.branch.user.branch}
codeExampleText={commands.branch.user.branch}
/>
</li>
<li>
<p className="mb-2 mt-2">
<span>Once deployed, open the environment in browser</span>
<CodeExample
copyText={commands.branch.user.get_url}
codeExampleText={commands.branch.user.get_url}
/>
<span className="font-semibold">
When deployment is complete, open it in a browser
</span>
</p>
<CodeExample
copyText={commands.branch.user.get_url}
codeExampleText={commands.branch.user.get_url}
/>
</li>
</ol>
</>
Expand Down
105 changes: 58 additions & 47 deletions frontend/src/steps/StepComplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from "react";
import FeatureStep from "../components/FeatureStep";
import { ReactComponent as DoneIcon } from "../assets/utility/done.svg";
import commands from "../commands.json";
import CodeExample from "../components/CodeExample";

interface StepCompleteProps {
isDisabled: boolean;
Expand All @@ -23,57 +21,70 @@ const StepComplete: React.FC<StepCompleteProps> = ({
hideContent={hideContent}
>
<>
<p className="mb-2 mt-2 font-bold">
🎉 Kudos! You've aced the Upsun Demo!
</p>
<h4 className="mb-2 mt-2 text-lg font-semibold">
Ready for Your Next Project
</h4>
<p className="mb-2">
You've just experienced the power of Upsun's Git-based workflow to
stage and deploy Redis seamlessly.
</p>
<p className="mb-2 mt-5">
<span>
You've used the Upsun CLI to merge a new service into production and
to match the resources you worked with in staging to that
environment. From here, you can{" "}
<strong>scale those resources</strong> to whatever you need. For
example, at this moment your production Redis service has 0.5 CPU.
You can scale down the amount of resources on the production Redis
service container with the following command:
</span>
<CodeExample
wrapLines
copyText={commands["scale"].user.resources_set}
codeExampleText={commands["scale"].user.resources_set}
/>
</p>
<p className="mb-2 mt-5">
<span>Delete this project when ready using:</span>
<CodeExample
copyText={commands.complete.user.delete_project}
codeExampleText={commands.complete.user.delete_project}
/>
You've seen the core Upsun workflow: Git-driven infrastructure,
instant staging environments, and on-the-fly scaling. Now, see how to
take your next project further.
</p>
<h4 className="mt-5 text-lg font-semibold">What's next?</h4>
<ul className="list-disc list-outside ml-8 mt-2">
<h4 className="mt-5 text-lg font-semibold">What's Next?</h4>
<ul className="list-disc list-outside ml-8 mt-2 space-y-2">
<li>
<strong>Deep Performance Insights:</strong> Every Upsun project
includes Blackfire, using built-in profiling and monitoring to show
how your code performs.
</li>
<li>
<strong>Automate Everything:</strong> Use Cron jobs to schedule
tasks directly in your{" "}
<code className="px-1">.upsun/config.yaml</code> with the same ease
you used to add Redis.
</li>
<li>
<strong>Flexible Workflows:</strong> Connect your own CI/CD or use
our API to automate environment creation for every pull request.
</li>
<li>
<a
href="https://docs.upsun.com/get-started/here.html"
target="_blank"
rel="noreferrer"
>
Migrate your application
</a>
<strong>AI-Assisted Onboarding:</strong> Use the AI Configuration
Generator to analyze your code and automatically suggest the best{" "}
<code className="px-1">.upsun/config.yaml</code> setup for your
next project.
</li>
<li className="mt-2">
Explore Upsun's{" "}
<a href="https://docs.upsun.com/manage-resources.html#horizontal-scaling">
horizontal scalability features
</a>
.
<li>
<strong>Vector-Ready Infrastructure:</strong> Deploy GenAI and RAG
apps instantly by provisioning managed services like Chroma, Qdrant,
or PostgreSQL with pgvector.
</li>
<li>
<strong>Conversational Ops:</strong> Connect Upsun to your favorite
AI assistant via our MCP server to query logs, check status, or
trigger deployments using natural language.
</li>
</ul>
<p className="mb-2 mt-4 font-semibold">
Welcome to the Upsun Community!
<p className="mb-2 mt-5 font-semibold">Ready to build?</p>
<div className="flex flex-row gap-3 mb-5">
<a
href="https://console.upsun.com/"
target="_blank"
rel="noreferrer"
className="px-4 py-2 bg-upsun-violet-600 text-white rounded hover:bg-upsun-violet-700 transition-colors text-sm font-medium"
>
Start your next project
</a>
<a
href="https://docs.upsun.com"
target="_blank"
rel="noreferrer"
className="px-4 py-2 bg-upsun-black-900 text-white rounded hover:bg-upsun-black-800 transition-colors text-sm font-medium"
>
Explore the Docs
</a>
</div>
<p className="mb-2 text-sm text-gray-400">
If you're finished with this demo, you can remove it anytime with{" "}
<code className="px-1">upsun project:delete</code>.
</p>
</>
</FeatureStep>
Expand Down
21 changes: 8 additions & 13 deletions frontend/src/steps/StepLocalWorkflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,17 @@ const StepLocalWorkflow: React.FC<StepLocalWorkflowProps> = ({
>
<>
<p className="mb-2">
<strong>
Everything you see in the Console can be managed via the CLI.
</strong>{" "}
While the Console (UI) is great for a bird's-eye view, the CLI is
built to live where you do, in the terminal, making it the fastest way
to branch, test, and deploy without leaving your code.
Next, you'll connect to your new Upsun project. See how the CLI
brings the Console's power right to your terminal: you can branch,
test, and deploy without ever leaving your code.
</p>
<h4 className="mt-5 text-lg font-semibold">Next Step</h4>
<ol className="list-decimal list-outside ml-4 mt-2">
<li>
<p className="mb-2 mt-2">
<strong>Install the Upsun CLI</strong>
<span className="font-semibold">Install the Upsun CLI</span>
</p>
<p className="mb-2">
Choose your package manager to get the toolset on your machine.
Select your package manager to get the toolset:
</p>
<div className="flex flex-row gap-2 mb-2">
{tabs.map((tab) => (
Expand All @@ -76,12 +72,11 @@ const StepLocalWorkflow: React.FC<StepLocalWorkflowProps> = ({
</li>
<li>
<p className="mb-2 mt-2">
<strong>Link your project</strong>
<span className="font-semibold">Link to your Upsun project</span>
</p>
<p className="mb-2">
Run this to authenticate and download a local copy of your code.
This command connects your local environment directly to the cloud
project you just created.
Run this command to authenticate and connect with the project you
just created.
</p>
<CodeExample
copyText={`${commands.setup.user.link} ${PROJECT_ID}`}
Expand Down
60 changes: 33 additions & 27 deletions frontend/src/steps/StepMergeProduction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,44 +19,47 @@ const StepMergeProduction: React.FC<StepMergeProductionProps> = ({
<FeatureStep
data-testid="step-merge-production"
icon={<MergeIcon className="w-10 h-10" />}
title="5. Merge changes into production & scale up"
title="5. Merge changes into production and scale up"
isDisabled={isDisabled}
hideContent={hideContent}
>
<>
<p className="mb-2">
Awesome! Your changes are live in{" "}
<code className="px-1">{environment?.toLocaleLowerCase()}</code>.
Your changes move from staging to production in seconds. With Upsun,
your code and infrastructure updates happen in a single, atomic
operation—meaning zero downtime and zero surprises.
</p>
<p className="mb-2">
Now it's time to merge the new Redis service into your production
environment and ensure your app can handle any traffic spike.
</p>
<h4 className="mt-5 text-lg font-semibold">Next Step</h4>
<ol className="list-decimal list-outside ml-4 mt-2">
<li>
<p className="mb-2">
<span>Deploy staging changes to production</span>
<span className="font-semibold">Go live</span>
</p>
<p className="mb-2">
Push your infrastructure and code changes to the live environment
in one go.
Merge your staging environment into the main production
environment. This syncs your code and provisions the new Redis
service in production instantly.
</p>
<CodeExample
copyText={`${commands["merge_production"].user.merge} ${environment?.toLocaleLowerCase()}`}
codeExampleText={`${commands["merge_production"].user.merge} ${environment?.toLocaleLowerCase()}`}
/>
<p className="mb-2 mt-2">
<span className="font-semibold">Verify the merge:</span> To see
your new Redis container active in the production environment, run:
</p>
<CodeExample
copyText={commands["merge_production"].user.service_list}
codeExampleText={commands["merge_production"].user.service_list}
/>
</li>
<li>
<p className="mb-2 mt-2">
<strong>Optimize your resources</strong>
<span className="font-semibold">Scale your resources instantly</span>
</p>
<p className="mb-2">
Upsun gives you total control. You can{" "}
<strong>scale up or down anytime</strong> via the CLI or the
Console to meet your specific needs. Use this command to
horizontally scale your backend and vertically scale your
services:
Adjust your horizontal and vertical scaling in a single step.
Upsun updates your resources on the fly without taking your
application offline.
</p>
<CodeExample
wrapLines
Expand All @@ -66,10 +69,10 @@ const StepMergeProduction: React.FC<StepMergeProductionProps> = ({
</li>
<li>
<p className="mb-2 mt-2">
<strong>Set it and forget it with Autoscaling</strong>
<span className="font-semibold">Autoscaling: Set it and forget it</span>
</p>
<p className="mb-2">
Want to stay ahead of traffic? You can{" "}
Want to automate resource adjustments? You can{" "}
<a
href="https://docs.upsun.com/manage-resources/autoscaling.html"
target="_blank"
Expand All @@ -78,19 +81,22 @@ const StepMergeProduction: React.FC<StepMergeProductionProps> = ({
>
configure autoscaling
</a>{" "}
to let Upsun automatically adjust resources for you, ensuring your
applications always perform at their best without manual
intervention.
to let Upsun handle adjustments for you based on real-time
traffic.
</p>
</li>
<li>
<p className="mb-2 mt-2">
<span>Open the production frontend in your browser</span>
<CodeExample
copyText={commands["merge_production"].user.get_url}
codeExampleText={commands["merge_production"].user.get_url}
/>
<span className="font-semibold">View your scaled production app</span>
</p>
<p className="mb-2">
While your app's front end looks the same for this demo, your
infrastructure just grew. Return to the demo app frontend:
</p>
<CodeExample
copyText={commands["merge_production"].user.get_url}
codeExampleText={commands["merge_production"].user.get_url}
/>
</li>
</ol>
</>
Expand Down
Loading
Loading