How to Deploy a Web Application to Cyclic

Do you want to deploy your Node.js project but don't know where to start or which service provider to use? You are in luck; this article will walk you through the steps for deploying your applications to Cyclic.

What is Cyclic?

It is a serverless hosting platform that specializes in providing a full-stack cloud experience. Cyclic apps are made up of code from a git repository, with each app running entirely on cloud infrastructure. Cyclic is a great free and easy-to-use alternative to Heroku.

Deploying an application using Cyclic is a straightforward process. Let's get right into it.

Before we proceed, ensure you have a GitHub account setup. If you don't, I recommend using the following steps outlined by wikiHow, here.

Creating a Simple project

If you already have a project, as previously mentioned, you can skip this section. If you don't, follow along as we build a simple Express.js project that displays "Hello World." on the browser.

1. Open a command prompt or terminal window. Create a new directory for your project mkdir express-project and navigate to the new directory cd express-project.

2. Initialize a new Node.js project using npm init-y

3. Install the Express.js framework npm install express

4. Open the folder directly from the command line code . to your text editor. Or you can search for the folder manually.

5. Create a new JavaScript file and name it index.js then open the file in the text editor and add the following code:

    const express = require('express');
    const app = express();
    const port = process.env.PORT ||3000
   
    app.get('/', function (req, res) {
      res.send('Hello, World!');
    });
   
    app.listen(port, function () {
      console.log('Listening on port 3000!');
    });
   

6. Navigate to the project directory in the command prompt and run the following command to start the server: node index.js . Then we can try it out at the following URL http://localhost:3000.

Congratulations! We have created an Express.js project that displays "Hello, World!" in the browser.

Creating a New Repository

1. Log in to your GitHub account.

2. Click on the "+" icon in the top-right corner of the screen.

3. Select "New repository" from the dropdown menu.

4. Enter a name for your repository in the "Repository name" field. Then click create repository.

   

5. Run the commands that are listed on GitHub after you click the Create repository button on your text editor's terminal.

   

Once you are done running the commands, refresh on your GitHub page on the browser.

Congratulations! We have uploaded our Express.js project on GitHub, you can clone this repository here.

Getting started on Cyclic

1. Sign up using this link: https://app.cyclic.sh/api/login

2. Link your GitHub account with Cyclic.

   

3. Congratulations! we have made it to the dashboard.

   

Deploying Project on Cyclic

Now that we have made it to the dashboard, it's time to deploy our simple project.

• Choose "Link your own" on the dashboard.

  

• Type in the name of the repository you want to deploy in the input field that reads "Search your repositories". In our case express-project, then we connect to our GitHub account.

  

• Confirm access to Github and your repository by clicking "Accept & Install

  

• Once you approve and install, the deployment process will begin.

  

Hurray! We made it! We just deployed our application on Cyclic. Once you are done, you can click on the link below to check out your app live. Here is mine: https://zany-pink-lizard-yoke.cyclic.app/

Once you go back to your dashboard, you can mess around with it by giving your app a custom URL or configuring your process.env and so on.

Conclusion

I am glad we went through the seamless process of deploying on Cyclic. Now you know that Cyclic enables developers to deploy an application on a web server quickly and painlessly. I hope you have enjoyed every bit of this tutorial, till next time.