Running Swirl Search🌌in an instant on Gitpod🌐💻and GitHub Codespaces🌩️🚀
Tags: opensource, ai, python, beginners
Published: 2023-10-15 06:51:40

Hello folks,

Let me quickly introduce you guys about Swirl before we start.

##What is Swirl?

Swirl is an open-source search engine which is built using Python and Django. Things which makes Swirl more special is that individual developers and organizations can use Swirl without paying single penny and even customize the search results by connecting to Database (E.g. SQL, NoSQL), Public Data Services (E.g. Google) and Enterprise Sources (E.g. Jira).
![Swirl_Search_demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjzganns2bks4iyk7koe.gif)
**GitHub Link:** https://github.com/swirlai/swirl-search

Now that you know about Swirl, let's try and explore Swirl using Cloud IDE.

## Table Of Contents
   * [Setting up Swirl using Gitpod](#gitpod)
   * [Setting up Swirl using GitHub Codespaces](#codespaces)
   * [Contributing to Swirl Community using Cloud IDE](#PR)

## Setting up Swirl using Gitpod <a name="gitpod"></a>

1. Click on below button to Configure New Workspace in Gitpod
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/swirlai/swirl-search/tree/develop)Alternatively, you can open [Swirl Repo](https://github.com/swirlai/swirl-search/tree/develop) and prefix Swirl Repo URL with `https://gitpod.io/new/#` after which it looks something like this https://gitpod.io/#https://github.com/swirlai/swirl-search/tree/develop
<br>**<u>NOTE:</u>** Throughout this tutorial we will be working with Gitpod on the develop branch as per [contribution guidelines of Swirl](https://github.com/swirlai/swirl-search#-contributing-to-swirl). If you intend to use the main branch, please use the following URL: https://gitpod.io/#https://github.com/swirlai/swirl-search/.

2. After opening the URL, we will see page as shown below:
![Gitpod_Workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df6bswajfnuxrqz63ere.png)
3. Click on continue button to create and initialize Swirl Workspace.
![Workspace_Creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3o966fcdmmyww2g2wzk.gif)
<a name="repeat"></a>
4. We will observe that browser version of VScode getting configured. And in terminal,  this command `docker-compose pull && docker-compose up` will start running.
![Browser_based_VScode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmg1zi5m151vp0y93j8s.PNG)
5. After few seconds, we can observe `INFO Listening on TCP 0.0.0.0:8000` log in the terminal.
![Command_success_in_Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8le7f4hwavesg48iasj.png)
6. Now our server is ready to serve the incoming requests on port 8000, as we are using Gitpod it will generates a dynamic URL for  accessing content on port 8000 instead of localhost:8000 as we would in local development environment. 
To open this URL in browser, we can click on open browser button through notifications popup as shown below:
![Vscode_port_notification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kgz2yd86jgsfchm2vmz.PNG)Alternatively, we can navigate to PORTS tab next to Terminal and click on link provided in the Address column for Port 8000.
![Ports_tab_in_Vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz2hed37errs0jjaswpq.png)
7. Oops, we encountered an error,
![Bad_request_error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldtxk121oryfe6fjyhhj.png)let's check terminal logs to know more about error in VScode
![Error_log_in_terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyb0tyszufwpp74eygwt.PNG)Seems like the dynamic URL which Gitpod generated is not allowed to request our server.
8. Now we need to make sure that our server accepts requests from our dynamic URL, we can fix this by creating .env file 
`.env` file should be created in root directory of the project as shown below:
![File_directory_after_adding_env_file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkfzbvf3s14c46j50cjl.PNG)
And add this line in .env file `ALLOWED_HOSTS=localhost,127.0.0.1,*
`* in ALLOWED_HOSTS mean is that we are allowing every host to access our server.
![env_file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25eix9h5la980e4k8too.PNG)
9. Now that we created .env file, we need to inform docker to use this configuration.
Open docker-compose.yaml and add following line at the end:
```
    env_file:
      - .env
```
This is how it looks after we add above lines
![docker_compose_file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvzt78z11bhv6wk693w3.PNG)
As we have changed docker-compose.yaml we need to restart our server for changes to reflect.
To stop the server press `CTRL+C` key.
To start the server enter `docker-compose pull && docker-compose up` command in terminal.
![restart_server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t559pftbz2fk1hsqe8m.PNG)Follow Steps [4-6](#repeat) to check if the URL is working.
![main_steps_gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcd89o6u7u112zquoel4.gif)
**<u>NOTE:</u>** While committing changes **do not** stage docker-compose.yaml file.

## Setting up Swirl using GitHub Codespaces <a name="codespaces"></a>

1. Click on below link to open Swirl Repository in **develop** branch
https://github.com/swirlai/swirl-search/tree/develop.
![Develop_branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5hpn7ogov9vvu2lf1pi.PNG)
<br>**<u>NOTE:</u>** We will be working with GitHub Codespaces on the **develop** branch as per [contribution guidelines of Swirl](https://github.com/swirlai/swirl-search#-contributing-to-swirl). If you intend to use the **main** branch, please use the following URL: 
https://github.com/swirlai/swirl-search/.
2. To create New Codespace on develop branch follow below steps:
   1. Click on **Code** button, which will open dropdown menu containing two tabs in it, namely **Local** and **Codespaces**.
   2. Then select **Codespaces** tab.
   3. Finally, click on the **Create codespace on develop** button to initiate the creation of codespace.
![Creation_of_Codespace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbotmb0h24v7mdkmsto5.PNG)
3. We will observe that browser version of VScode getting configured. In the terminal, the installation of pip and others requirements will start. After which `docker-compose pull && docker-compose up` command will start running.
![Terminal_creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9lj8pt7pea1cgjjoq7e.png)
4. Now inorder to view logs of the server, press `CTRL+SHIFT+P` key to open command palette and then search for `View Creation log`. We can notice new terminal with logs of our server.
![Command_palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gqj0nd9ixfrci0r3o4b.png)
5. After few seconds, we can observe `INFO Listening on TCP 0.0.0.0:8000` log in the terminal.
![Terminal_logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g35cp99ucldm461toi3e.png)
![Logs_gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntbac6bzs5zgs2bks8x8.gif)
6. Now our server is ready to serve the incoming requests on port 8000, as we are using GitHub Codespaces it will generates a dynamic URL for accessing content on port 8000 instead of localhost:8000 as we would in local development environment. 
We can navigate to PORTS tab next to Terminal and click on browser icon after hovering on link provided in the Address column for Port 8000.
![Port_8000](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwv608ihgvugsy32w4ai.png)
![Ports_gifs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lneipt0x4opa3hjcbked.gif)
7. In browser, you can observe Swirl login page with Username and Password fields. Enter **Username** as admin and Password as **Password**
![Swirl_login_page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uoz5tggangfc4ub8ntd.gif)

##Contributing to Swirl Community using Cloud IDE <a name="PR"></a>

###Using Codespaces

1. Create a new terminal by clicking on **+** button.
![Creating_new_terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onh2p7knflidgxx6bijd.png)
2. Enter `git fetch` command to get changes from remote repo.
![Git_fetch_latest_changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fck351h2dh3rsq2hjrwm.png)
3. Now that you are will to contribute to Swirl we need create a new branch and switch to it, to do this use `git checkout -b your-branch-name`.
![New_branch_creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tle5trj4pfqq807i73sk.png)
4. Do the changes accordingly and to check which files you created/modified use `git status`.
![Git_status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kje0zxrxpquwhr33zb34.png)
5. To stage all the changes use `git add .` and to commit the changes use `git commit -m "your commit message"`.
6. You will see a warning that you don't have write access to swirl repo and to get access we need to create a fork. Github will create use fork after we enter **y** for Would you like to proceed question. 
![Git_add_commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psbr9ytg2enh7sfw5n4p.png)
![Git_fork_warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79zk7lazvqeiq3yua891.png)
<a name="push_steps"></a>
7. To push the branch with changes use `git push origin your-branch-name`. After successfully pushing the changes you will get URL in terminal to create pull request(PR), copy it and paste in new tab.
![Git_push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfmgrpbfg0g3av03hg7v.png)
8. By default base repository comparing branch is **main** change it to develop branch by clicking on it.
![Default_comparing_branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv6ktck636ng7n75wfz6.png)
![Changing_default_comparing_branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwrjehom9oualh1bit7e.png)
9. Finally edit the PR template accordingly based on your changes.
![Final_PR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1h0773lwqukxdx8qx6d.png)

###Using Gitpod

1. Create a new terminal by clicking on **+** button.
![gp_terminal_creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy99pg58sy8lxv60zms6.PNG)
2. Enter `git fetch` command to get changes from remote repo.
![gp_git_fetch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2hciqpvv6e0y729gimc.png)
3. Now that you are will to contribute to Swirl we need create a new branch and switch to it, to do this use `git checkout -b your-branch-name`.
![Gitpod_new_branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oefpboarp8eitrzexv3i.png)
4. Do the changes accordingly and to check which files you created/modified use `git status`.
![Gitpod_status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdqv5gmp9sbwfbmg7ci8.png)
<br>**<u>NOTE:</u>** **Do not** stage docker-compose.yaml file.
5. To stage all the changes use `git add .` and to unstage docker-compose.yaml file use `git reset -- docker-compose.yaml` and to commit the changes use `git commit -m "your commit message"`.
![Staging_gitpod](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlxjqnyescnf1ccbdbdg.png)
![Gitpod_commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ub590crn8b3ct3gwa6k.png)
6. To push the changes, we need to grant GitHub access for Gitpod by following below steps:
   1. Navigate to Source Control by clicking on git logo on side panel.
   2. Finally, click on horizontal three-dots button.
![Source_control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gy2zmmfeyc7qw7rcwbb.PNG)
   3. Click on **push** button in the dropdown.  
![Push_dropdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82lo6fjeb1weda96pq7e.PNG)
   4. We will get a popup about remote repo, now click on **ok** to publish newly created branch as shown below 
![Publish_branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cblyuyjggljp7dhitkx.PNG)
   5. We will get another popup whether to create fork of the repository click on **Create_Fork**.
![Create_fork_button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbspvei50gkjo2ujkvcv.PNG)
   6. Allow GitHub extension to sign in.
![Allow_GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v1gci0wqykrycs3m4e7.PNG)
   7. Click on **Open Access Control** button in the Grant permissions notifications.
![Open_Access_Control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6jx2egkrw7itjy9cvjz.PNG)
   8. A new tab will open, displaying Gitpod User settings.
![Gitpod_User_settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f8jappa0mtc8uinic8w.PNG)
   9. Click on three vertical dots button present in GitHub row to edit permissions.
![Edit_permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rjf2v6f0vw5a4fzhtku.PNG)
  10. Now checkmark on **read:user**,**repo** and **workflow** and click on update permissions.
![Update_permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akzlohvs7ffp21hcvkhh.PNG)

  11. Now enter `git push origin your-branch-name`. From here follow [Steps 7-9](#push_steps) from Contribution using Codespaces
![Gitpod_final_push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huemao9q54q6pfyitl81.PNG)

##Conclusion
With the help of Gitpod and GitHub Codespaces we were able to run instantly Swirl Search with minimal commands and without the need of any installation.

**Special Mentions:** Thank you @srbhr for your support and guidance.

**GitHub:** [GitHub Repository](https://github.com/swirlai/swirl-search)🧑‍💻

**Slack Community:** [Swirl Slack Community](https://join.slack.com/t/swirlmetasearch/shared_invite/zt-22ozfml3o-oqe7sWvB5jw6xEwv1duW4g)💬📢

**Twitter:** [Follow Swirl on Twitter/𝕏](https://twitter.com/SWIRL_SEARCH)