Skip to content

How tos #207

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
LawEyez wants to merge 12 commits into
base: main
Choose a base branch
from
Open

How tos #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7759329
Add how to dropdown.
LawEyez Oct 23, 2023
3268ff5
Add react how to.
LawEyez Oct 23, 2023
624622c
Add initial content.
LawEyez Oct 23, 2023
8dc78ef
Add express api link.
LawEyez Oct 23, 2023
e3cdfba
Add express api how to page.
LawEyez Oct 23, 2023
8100194
Add mobile menu dropdown.
LawEyez Oct 23, 2023
e546852
Increase y space.
LawEyez Oct 23, 2023
397073d
Merge branch 'main' into how-tos
LawEyez Oct 23, 2023
363ad1b
Change to express api.
LawEyez Oct 23, 2023
2e76e46
Add how tos.
LawEyez Oct 25, 2023
ba764b8
Remove how tos.
LawEyez Oct 25, 2023
ca014c7
Fix code blocks.
LawEyez Oct 25, 2023
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
22 changes: 22 additions & 0 deletions components/Footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,28 @@
</nuxt-link>
</div>
</div>

<!-- ********** HOW TO ********** -->
<div class="space-y-4">
<h4 class="text-base font-semibold">How To</h4>

<div class="flex flex-col gap-3 text-xs">
<nuxt-link
to="/how-to/host-react-app-free"
class="text-sm !no-underline text-neutral-400 hover:text-white transition"
>
Host a React app for free
</nuxt-link>

<nuxt-link
to="/how-to/host-express-api-free"
class="text-sm !no-underline text-neutral-400 hover:text-white transition"
>
Host an Express API for free
</nuxt-link>
</div>
</div>

</div>

<!-- ********** BRAND ********** -->
Expand Down
97 changes: 97 additions & 0 deletions pages/how-to/host-express-api-free.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<template>
<section class='section common-section'>
<div class="common-section">
<!-- ********* PILL TEXT ********* -->
<Pill text="Express API" />

<!-- ********* CTA TEXTS ********* -->
<div class="space-y-6">
<h2 class="font-extrabold text-4xl lg:text-5xl text-center capitalize">
How to host an Express API on Cyclic.
</h2>

<p class="text-center text-neutral-300">
A quick guide to help you get up and running with Express.
</p>
</div>
</div>

<div class='w-full md:max-w-screen-md mx-auto space-y-16'>
<div class='w-full h-[400px] rounded-3xl flex items-center justify-center text-9xl bg-sky-500
text-white'>
<i class="ri-javascript-line"></i>
</div>

<article class='prose prose-invert prose-lg prose-pre:px-0 prose-pre:py-2 prose-pre:m-0
prose-pre:h-max'>
<h2>Prerequisites</h2>
<ul>
<li>You should have a Cyclic.sh account. If you don't have one, sign up for an account on their website.</li>
<li>Make sure you have Node.js and npm installed on your local machine.</li>
<li>You should have an Express API project ready to deploy.</li>
</ul>

<h2>Step 1: Set up Your Express API</h2>
<p>If you don't have an Express API project yet, create one with Node.js and Express:</p>
<pre>
mkdir my-express-api
cd my-express-api
npm init
npm install express</pre>
<p>Build your API by creating routes, controllers, and defining endpoints.</p>

<h2>Step 2: Create a Cyclic.sh app</h2>
<ol>
<li>Log in to your Cyclic.sh account.</li>
<li>Click on "New App" and deploy a new app.</li>
<li>On the 'Link Your Own' tab, search for your Express API. If you don't see it, try refreshing the list.</li>
<li>Once you select the repo, a Github popup will appear asking you to install Cyclic and give it access to the repo.</li>
</ol>

<h2>Step 3: Set Up Deployment Configuration</h2>
<ol>
<li>Specify the branch you want to deploy.</li>
<li>Set up your deployment settings, including environment variables, if needed.</li>
<li>Start the deployment process.</li>
</ol>

<h2>Step 4: Access Your Express API</h2>
<p>After the deployment is complete, you can access your Express API through the provided URL. Test your API endpoints and ensure it's working correctly.</p>

<p>That's it! You've successfully hosted your Express API on Cyclic.sh for free. Cyclic.sh offers a free tier that allows you to run small projects at no cost. If you have more complex requirements or need additional resources, you can explore their pricing plans.</p>
</article>

<!-- ********* CALL TO ACTION ********* -->
<div class="flex flex-col gap-2 items-center border !border-neutral-700 bg-neutral-800/20 rounded-2xl p-10
space-y-5 text-center">
<h2 class="text-3xl font-semibold">Deploy an Express API now</h2>

<hr class="border-primary w-10">

<p class="text-neutral-300 w-full md:w-[50%] leading-[160%]">
We have a starter template ready, all you have to do is press Deploy.
</p>

<div class="flex flex-col sm:flex-row sm:items-center gap-2">
<a
href="https://app.cyclic.sh/api/login"
class="bg-primary text-white capitalize flex items-center justify-center rounded-xl px-4 py-3
gap-2 hover:no-underline hover:scale-105 transition w-full sm:w-[250px]"
>
Deploy
</a>

<a
href="https://cyclic.typeform.com/to/HNNO8Bkp"
class="border !border-neutral-500 text-white capitalize flex items-center justify-center rounded-xl px-4 py-3
gap-2 hover:no-underline hover:!border-white transition w-full sm:w-[250px]"
target="_blank"
>
Talk to an Engineer
<i class="ri-arrow-right-up-line"></i>
</a>
</div>
</div>
</div>
</section>
</template>
100 changes: 100 additions & 0 deletions pages/how-to/host-react-app-free.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<template>
<section class='section common-section'>
<div class="common-section">
<!-- ********* PILL TEXT ********* -->
<Pill text="React" />

<!-- ********* CTA TEXTS ********* -->
<div class="space-y-6">
<h2 class="font-extrabold text-4xl lg:text-5xl text-center capitalize">
How to host a React app on Cyclic.
</h2>

<p class="text-center text-neutral-300">
A quick guide to help you get up and running with React.
</p>
</div>
</div>

<div class='w-full md:max-w-screen-md mx-auto space-y-16'>
<div class='w-full h-[400px] rounded-3xl flex items-center justify-center text-9xl bg-sky-500
text-white'>
<i class="ri-reactjs-fill"></i>
</div>

<article class='prose prose-invert prose-lg prose-pre:px-0 prose-pre:py-2 prose-pre:m-0
prose-pre:h-max'>
<h2>Prerequisites</h2>
<ul>
<li>You should have a Cyclic.sh account. If you don't have one, sign up for an account on their website.</li>
<li>Make sure you have Node.js and npm installed on your local machine.</li>
</ul>

<h2>Step 1: Set up your React App</h2>
<p>If you don't have a React app already, you can create one using Create React App:</p>
<pre>
npx create-react-app my-react-app
cd my-react-app</pre>

<h2>Step 2: Build your React App</h2>
<p>Before deploying your React app, you need to build it for production. Run the following command in your project's root directory:</p>
<pre>
npm run build</pre>

<h2>Step 3: Create a Cyclic.sh app</h2>
<ol>
<li>Log in to your Cyclic.sh account.</li>
<li>Click on "New App" and deploy a new app.</li>
<li>On the 'Link Your Own' tab, search for your React app. If you don't see it, try refreshing the list.</li>
<li>Once you select the repo, a Github popup will appear asking you to install Cyclic and give it access to the repo.</li>
</ol>

<h2>Step 5: Deploy your React App on Cyclic.sh</h2>
<ol>
<li>Once you've connected your repository, select the branch you want to deploy.</li>
<li>Set up your deployment settings (you can use the default settings for a simple React app).</li>
<li>Start the deployment process.</li>
</ol>

<p>Cyclic.sh will automatically build your code, and your React app will be hosted. You'll be provided with a URL where your app is accessible.</p>

<h2>Step 6: Access your React App</h2>
<p>After the deployment is complete, you can access your React app by navigating to the provided URL in your web browser.</p>

<p>That's it! You've successfully hosted your React app on Cyclic.sh for free. Cyclic.sh offers a free tier that allows you to run small projects at no cost. If you have more complex requirements, you can explore their pricing plans.</p>
</article>

<!-- ********* CALL TO ACTION ********* -->
<div class="flex flex-col gap-2 items-center border !border-neutral-700 bg-neutral-800/20 rounded-2xl p-10
space-y-5 text-center">
<h2 class="text-3xl font-semibold">Deploy a React app now</h2>

<hr class="border-primary w-10">

<p class="text-neutral-300 w-full md:w-[50%] leading-[160%]">
We have a starter template ready, all you have to do is press Deploy.
</p>

<div class="flex flex-col sm:flex-row sm:items-center gap-2">
<a
href="https://app.cyclic.sh/api/login"
class="bg-primary text-white capitalize flex items-center justify-center rounded-xl px-4 py-3
gap-2 hover:no-underline hover:scale-105 transition w-full sm:w-[250px]"
>
Deploy
</a>

<a
href="https://cyclic.typeform.com/to/HNNO8Bkp"
class="border !border-neutral-500 text-white capitalize flex items-center justify-center rounded-xl px-4 py-3
gap-2 hover:no-underline hover:!border-white transition w-full sm:w-[250px]"
target="_blank"
>
Talk to an Engineer
<i class="ri-arrow-right-up-line"></i>
</a>
</div>
</div>
</div>
</section>
</template>