From 77593290a56580fdd245709acec51fb3d92be61c Mon Sep 17 00:00:00 2001 From: laweyez Date: Mon, 23 Oct 2023 17:01:48 +0300 Subject: [PATCH 01/11] Add how to dropdown. --- components/Menu.vue | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/components/Menu.vue b/components/Menu.vue index e33c6a0f4..b3f4dfe84 100644 --- a/components/Menu.vue +++ b/components/Menu.vue @@ -15,6 +15,25 @@ + +
+ + + +
+
-
- +
+
+ +
+ +
+

Prerequisites

+
    +
  • You should have a Cyclic.sh account. If you don't have one, sign up for an account on their website.
    • +
  • Make sure you have Node.js and npm installed on your local machine.
    • +
+ +

Step 1: Set up your React App

+

If you don't have a React app already, you can create one using Create React App:

+ 
+          npx create-react-app my-react-app
+          cd my-react-app
+
+ +

Step 2: Build your React App

+

Before deploying your React app, you need to build it for production. Run the following command in your project's root directory:

+ 
+          npm run build
+
+ +

Step 3: Create a Cyclic.sh app

+
    +
  1. Log in to your Cyclic.sh account.
    2. +
  2. Click on "New App" and deploy a new app.
    3. +
  3. On the 'Link Your Own' tab, search for your React app. If you don't see it, try refreshing the list.
    4. +
  4. Once you select the repo, a Github popup will appear asking you to install Cyclic and give it access to the repo.
    5. +
+ +

Step 5: Deploy your React App on Cyclic.sh

+
    +
  1. Once you've connected your repository, select the branch you want to deploy.
    2. +
  2. Set up your deployment settings (you can use the default settings for a simple React app).
    3. +
  3. Start the deployment process.
    4. +
+ +

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.

+ +

Step 6: Access your React App

+

After the deployment is complete, you can access your React app by navigating to the provided URL in your web browser.

+ +

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.

+
+ + +
+

Deploy a React app now

+ +
+ +

+ We have a starter template ready, all you have to do is press Deploy. +

+ +
+ + Deploy + + + + Talk to an Engineer + + +
+
\ No newline at end of file From 8dc78ef7021d2487c2b5a0af3c739265597c4727 Mon Sep 17 00:00:00 2001 From: laweyez Date: Mon, 23 Oct 2023 18:17:03 +0300 Subject: [PATCH 04/11] Add express api link. --- components/Menu.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/Menu.vue b/components/Menu.vue index b3f4dfe84..918ac377a 100644 --- a/components/Menu.vue +++ b/components/Menu.vue @@ -31,6 +31,14 @@ > Host a React app for free + + + Host an Express API for free +
From e3cdfbab87f93c72d7b77eca0f947c87dd6e1d7b Mon Sep 17 00:00:00 2001 From: laweyez Date: Mon, 23 Oct 2023 18:17:17 +0300 Subject: [PATCH 05/11] Add express api how to page. --- pages/how-to/host-express-api-free.vue | 97 ++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 pages/how-to/host-express-api-free.vue diff --git a/pages/how-to/host-express-api-free.vue b/pages/how-to/host-express-api-free.vue new file mode 100644 index 000000000..577c5fa6c --- /dev/null +++ b/pages/how-to/host-express-api-free.vue @@ -0,0 +1,97 @@ + \ No newline at end of file From 81001949fbccb65dacb5c4475036e4a5c8ec0f23 Mon Sep 17 00:00:00 2001 From: laweyez Date: Mon, 23 Oct 2023 18:19:56 +0300 Subject: [PATCH 06/11] Add mobile menu dropdown. --- components/Menu.vue | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/components/Menu.vue b/components/Menu.vue index 918ac377a..ad2b3d3e5 100644 --- a/components/Menu.vue +++ b/components/Menu.vue @@ -18,7 +18,7 @@
@@ -223,6 +223,34 @@
+ +
+ + + +
+
-
+
From 363ad1bb74cf5098178943905ad1e1352aa8bd2c Mon Sep 17 00:00:00 2001 From: laweyez Date: Mon, 23 Oct 2023 18:41:54 +0300 Subject: [PATCH 08/11] Change to express api. --- pages/how-to/host-express-api-free.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/how-to/host-express-api-free.vue b/pages/how-to/host-express-api-free.vue index 13a368821..c51b827a9 100644 --- a/pages/how-to/host-express-api-free.vue +++ b/pages/how-to/host-express-api-free.vue @@ -44,7 +44,7 @@
  1. Log in to your Cyclic.sh account.
  2. Click on "New App" and deploy a new app.
    3. -
  3. On the 'Link Your Own' tab, search for your React app. If you don't see it, try refreshing the list.
    4. +
  4. On the 'Link Your Own' tab, search for your Express API. If you don't see it, try refreshing the list.
  5. Once you select the repo, a Github popup will appear asking you to install Cyclic and give it access to the repo.
From 2e76e46d38daecc20662b94eb8d05a9bc1e37997 Mon Sep 17 00:00:00 2001 From: laweyez Date: Wed, 25 Oct 2023 08:09:53 +0300 Subject: [PATCH 09/11] Add how tos. --- components/Footer.vue | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/components/Footer.vue b/components/Footer.vue index fbd0366b2..5694ab614 100644 --- a/components/Footer.vue +++ b/components/Footer.vue @@ -125,6 +125,28 @@
+ + +
+

How To

+ +
+ + Host a React app for free + + + + Host an Express API for free + +
+
+
From ba764b8c5d24f711afa6458214f4be3bb997098e Mon Sep 17 00:00:00 2001 From: laweyez Date: Wed, 25 Oct 2023 08:10:12 +0300 Subject: [PATCH 10/11] Remove how tos. --- components/Menu.vue | 55 --------------------------------------------- 1 file changed, 55 deletions(-) diff --git a/components/Menu.vue b/components/Menu.vue index ad2b3d3e5..e33c6a0f4 100644 --- a/components/Menu.vue +++ b/components/Menu.vue @@ -15,33 +15,6 @@ - -
- - - -
-
- -
- - - -
-
-
+

Prerequisites

  • You should have a Cyclic.sh account. If you don't have one, sign up for an account on their website.
    • @@ -36,8 +37,7 @@ mkdir my-express-api cd my-express-api npm init - npm install express - + npm install express

    Build your API by creating routes, controllers, and defining endpoints.

    Step 2: Create a Cyclic.sh app

    diff --git a/pages/how-to/host-react-app-free.vue b/pages/how-to/host-react-app-free.vue index a064e7283..2d0176755 100644 --- a/pages/how-to/host-react-app-free.vue +++ b/pages/how-to/host-react-app-free.vue @@ -22,7 +22,8 @@ -
    +

    Prerequisites

    • You should have a Cyclic.sh account. If you don't have one, sign up for an account on their website.
      • @@ -33,14 +34,12 @@

      If you don't have a React app already, you can create one using Create React App:

                 npx create-react-app my-react-app
-          cd my-react-app
-
      + cd my-react-app

      Step 2: Build your React App

      Before deploying your React app, you need to build it for production. Run the following command in your project's root directory:

      -          npm run build
-
      + npm run build

      Step 3: Create a Cyclic.sh app