DEV Community: Kamaal Abshir

Install Cursor on Linux

Kamaal Abshir — Thu, 02 Jan 2025 06:14:08 +0000

How to Install Cursor the AI Editor on Linux Update 2024

Kamaal Abshir ・ Aug 27 '23

How to install Cursor the AI- editor on linux

Kamaal Abshir — Tue, 21 Nov 2023 08:38:59 +0000

Cursor is an AI-first code editor designed for pair-programming with AI, it is available for download on Linux, Mac, and Windows platforms.
Cursor is built to help developers build software faster and more efficiently.

I installed cursor and used it on my mac it's straight forward how to installed it on mac, but when i tried to install it on Linux Ubuntu it's quite challenging.

how ever after doing some research on the internet i figured it out how to install on Ubuntu Linux here is the steps i did to have cursor working on my machine.

Visit the Cursor website at https://cursor.so and click on the "Download for Linux" button.

Once the download is complete, in your download folder you will have a file that ends with this extension .Appimage

wait what the heck is this extension ".Appimage"

AppImage is a universal software package format that can be installed on Linux without going through the traditional way of installation

Don't click right away, we have to make the file executable, so it can run nicely and smoothly, navigate the Download folder or where you downloaded the cursor app and run this command to make the file executable

chmod +x cursor-0.8.5.AppImage

cursor-0.8.5.AppImage is the file i downloaded from the cursor website yours maybe variant just replace after +x to your file name.

okay, now you have encouter this error, if you don't see any error you can skip step 4

./cursor-0.8.5.AppImage
dlopen(): error loading libfuse.so.2

AppImages require FUSE to run. 
You might still be able to extract the contents of this AppImage 
if you run it with the --appimage-extract option. 
See https://github.com/AppImage/AppImageKit/wiki/FUSE 
for more information

so what the heck is going on ?

The error message indicates that the .AppImage requires FUSE to run, to fix this issue, and fuse it is a mechanism for Unix-like operating systems that allows non-privileged users to create their own file systems without editing kernel code.
This is achieved by running file system code in user space, while the FUSE kernel module provides only a "bridge" to the actual kernel interfaces.

install fuse

sudo apt-get install fuse

once you install the fuse now run again this command

chmod +x cursor-0.8.5.AppImage

nice one more step now you can run .Appimage by typing or by double clicking the cursor file on your download folder

./cursor-0.8.5.AppImage

you can run any time that you need by double clicking the app in your download folder or on your terminal.

How to add cursor app on the installed application list

each time you need to run cursor you have to go download folder and run it from there

so you follow these steps to add the cursor on application list

move the app from the download to opt folder

sudo mv cursor-0.8.5.AppImage /opt/cursor.appimage

Create a desktop entry for Cursor by running the command

sudo nano /usr/share/applications/cursor.desktop

past the follow in the file you've just created

[Desktop Entry]
Name=Cursor
Exec=/opt/cursor.appimage
Icon=/opt/cursor.png
Type=Application
Categories=Development;

save the file

ctl + x

then

press y

then

press enter

one last step we have to add any icon you like, to the app so you can differentiate it from other apps since we move the app to opt direcotry,

add .png image to the opt file that is named cursor.png

that is it thanks for reading

How to install Cursor the AI- editor on linux

Kamaal Abshir — Tue, 21 Nov 2023 08:36:07 +0000

I installed cursor and used it on my mac it's straight forward how to installed it on mac, but when i tried to install it on Linux Ubuntu it's quite challenging.

how ever after doing some research on the internet i figured it out how to install on Ubuntu Linux here is the steps i did to have cursor working on my machine.

Visit the Cursor website at https://cursor.so and click on the "Download for Linux" button.

Once the download is complete, in your download folder you will have a file that ends with this extension .Appimage

wait what the heck is this extension ".Appimage"

AppImage is a universal software package format that can be installed on Linux without going through the traditional way of installation

Don't click right away, we have to make the file executable, so it can run nicely and smoothly, navigate the Download folder or where you downloaded the cursor app and run this command to make the file executable

chmod +x cursor-0.8.5.AppImage

cursor-0.8.5.AppImage is the file i downloaded from the cursor website yours maybe variant just replace after +x to your file name.

okay, now you have encouter this error, if you don't see any error you can skip step 4

./cursor-0.8.5.AppImage
dlopen(): error loading libfuse.so.2

AppImages require FUSE to run. 
You might still be able to extract the contents of this AppImage 
if you run it with the --appimage-extract option. 
See https://github.com/AppImage/AppImageKit/wiki/FUSE 
for more information

so what the heck is going on ?

The error message indicates that the .AppImage requires FUSE to run, to fix this issue, and fuse it is a mechanism for Unix-like operating systems that allows non-privileged users to create their own file systems without editing kernel code.
This is achieved by running file system code in user space, while the FUSE kernel module provides only a "bridge" to the actual kernel interfaces.

install fuse

sudo apt-get install fuse

once you install the fuse now run again this command

chmod +x cursor-0.8.5.AppImage

nice one more step now you can run .Appimage by typing or by double clicking the cursor file on your download folder

./cursor-0.8.5.AppImage

you can run any time that you need by double clicking the app in your download folder or on your terminal.

How to add cursor app on the installed application list

each time you need to run cursor you have to go download folder and run it from there

so you follow these steps to add the cursor on application list

move the app from the download to opt folder

sudo mv cursor-0.8.5.AppImage /opt/cursor.appimage

Create a desktop entry for Cursor by running the command

sudo nano /usr/share/applications/cursor.desktop

past the follow in the file you've just created

[Desktop Entry]
Name=Cursor
Exec=/opt/cursor.appimage
Icon=/opt/cursor.png
Type=Application
Categories=Development;

save the file

ctl + x

then

press y

then

press enter

one last step we have to add any icon you like, to the app so you can differentiate it from other apps since we move the app to opt direcotry,

add .png image to the opt file that is named cursor.png

that is it thanks for reading

How to Install Cursor the AI Editor on Linux Update 2024

Kamaal Abshir — Sun, 27 Aug 2023 07:09:19 +0000

Cursor is an AI-powered code editor for Windows, Mac and Linux, it was created to help developers by combining programming and AI to create software faster and more efficiently.

I had no trouble installing Cursor on my Mac, however when I attempted to install it on Ubuntu Linux, I encountered multiple obstacles.

After some research, I found out how to get it working and sharing the steps with you here.

Step 1 Download Cursor

Go to the https://cursor.so and click on the "Download" button.

When the download is finished, a file with this extension .AppImage at the end will be in your download folder

what is this ".AppImage" extension?

AppImage is a universal software package format that does not require the conventional installation method to be installed on Linux.

Step 2: Make the .AppImage File Executable

Before running the file, you need to make it executable, Open a terminal and navigate to your Downloads folder (or the folder where you saved the file), then run:

chmod +x Cursor-0.50.5-x86_64.AppImage

Note: The filename may differ, so make sure to replace Cursor-0.50.5-x86_64.AppImage with the correct file name if yours is different.

Step 3: FUSE Error (Optional)

Proceed to Step 3 if you run into a problem at this point, If you didn't encounter this error, you can skip the Step 3

./Cursor-0.50.5-x86_64.AppImage
dlopen(): error loading libfuse.so.2

AppImages require FUSE to run. 
You might still be able to extract the contents of this AppImage 
if you run it with the --appimage-extract option. 
See https://github.com/AppImage/AppImageKit/wiki/FUSE 
for more information

So what’s going on here? Don’t panic.

The error tells us that Cursor needs FUSE (Filesystem in Userspace) to run, this is a Linux feature that lets regular users run filesystems without needing root access.

Install FUSE (Optional)

sudo apt-get install libfuse2

Step 4 Make File Exectutable

once you install the libfuse2 now run again this command

chmod +x Cursor-0.50.5-x86_64.AppImage

Step 5: Sandbox Error (Optional)

If you try to run Cursor and see something like this:

 ./Cursor-0.50.5-x86_64.AppImage
The setuid sandbox is not running as root. Common causes:
  * An unprivileged process using ptrace on it, like a debugger.
  * A parent process set prctl(PR_SET_NO_NEW_PRIVS, ...)
Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Operation not permitted
[7278:0529/092356.887893:FATAL:zygote_host_impl_linux.cc(207)] Check failed: . : Invalid argument (22)
[1]    7278 trace trap (core dumped)  ./Cursor-0.50.5-x86_64.AppImage

Don't worry. This happens because the app is trying to use a Linux feature called namespaces (used for sandboxing), but your system isn't allowing it
This is usually caused by:

Running from a non-root terminal
Ubuntu disabling user namespaces for security reasons

Quick Fix, try running the AppImage like this:

./Cursor-0.50.5-x86_64.AppImage --no-sandbox

⚠️ This skips the sandboxing feature. It's less secure but good for testing.

Step 6 Run The .AppImage

Great! You can now run the .AppImage file either by running the command from the terminal or by opening the Cursor file directly from your Downloads folder

./Cursor-0.50.5-x86_64.AppImage

Follow these steps to add Cursor to your applications list

How to add cursor app on the installed application list

Follow these steps to add Cursor to your applications list

Move the app from the download to opt folder

sudo mv Cursor-0.50.5-x86_64.AppImage /opt/cursor.appimage

Create a desktop entry for Cursor by running the command

sudo nano /usr/share/applications/cursor.desktop

Past the follow in the file you've just created

[Desktop Entry]
Name=Cursor
Exec=/opt/cursor.appimage --no-sandbox
Icon=/opt/cursor.png
Type=Application
Categories=Development;

save the file

ctl + x

then

press y

then

press enter

As Final Step, we should add an icon to the app so you can tell it apart from other applications

Since we moved the app into the /opt directory, add a .png image into the /opt directory as well

The image file should be named cursor.png as defined when we created the desktop entry.

If you did all the steps and you application icon is not showing Log Out then login again

That is it thanks for reading :)

Angular Newbies V

Kamaal Abshir — Sat, 08 Jan 2022 06:40:31 +0000

Angular CLI

What is Angular CLI ?

The Angular CLI is tool that angular developers use to make it easy to create an Angular application that works and follows best practices right out of the box.

don't worry i'll make a series about the angular CLI,
angular CLI helps to create every piece of angular application with one line like component, services, pipes, and so on.

Today's post is all about Creating Angular Components using Angular CLI.

as i mentioned in the first post you have to install Angular CLI on your computer to use it , if you don't have Angular CLI you can install

npm install -g @angular/cli

this line of command will install angular CLI globally on your machine.

now let's go and make a fun of Angular CLI
To create a new component go the folder of your angular application and type this command

ng generate component ComponentName

Walaaaah ! that is it you just generated new component
so let's explain what that line of code did
first of all it will generate 4 files

the template (.html) file
the style (.css) file
the component (.ts) file
the test file

Also did register our component in the angular Module so we can use it's selector across our application
easy isn't it !

so there are some flags you can add when generating new component using angular CLI , we'll learn the for the up comming series

so let's see these two flags

--skip-tests
-dry-run

these two commands tell angular CLI to do some thing extra

ng generate component componentName --skip-tests

it will skip the test file on the new component as we saw above the 4 files angular generats one of the was test file it will not generate a test file each time you use this flag

ng generate component componentName -dry-run

this flag it shows you what this command do in the disk it will not create anything on your folder it will just show you the before -dry-run command what that command will do,

it just reports you what will happen and it will not create a single file on your disk

general use case of this command is when you are not sure what this command will do just test it with -dry-run and it will report you what would happen if this command is executed

don't worry if you did not understand clearly will talk about this commands in a separate topics

i hope you found some thing useful here thanks for you reading

Angular Woo Commerce Landing Page

Kamaal Abshir — Tue, 28 Dec 2021 05:29:59 +0000

Hey 🖐 here is the landing page of woocommerce redesigned by pablo you can find the design in the Figma Community and i used Angular to convert the design into actual code here is my GitHub you can find the source Code

mhbaando / woocommerce

this is a compleate redesign of WooCommerce Landing Page thi design you can get from figma Community page and designed by : mr Pablo

Redesign WooCommerce

this is a compleate redesign of WooCommerce Landing Page thi design you can get from figma Community page and designed by : mr Pablo

Please Follow Him

and also fllow me on all my social media @mhBaando

Feel free to download and practice in your local host and make sure to run npm install to install all the dependecy before you run .

here is the screen shot of the landing page

View on GitHub

and here is the Promo

Angular Newbies IV

Kamaal Abshir — Mon, 27 Dec 2021 09:10:37 +0000

Angular Components

angular is set of components, we create each component and arrange them in to form our application.

component is the building block of each angular application , so how angular component is formed ?

The structure of the angular component

each angular component is consisted of

Template and it is the view of the application is the HTML, it's what user seas on the browser like buttons, paragraphs, headings and so on.
Class is the code, logic associated with the view, it where we write the logic there

e.g if some clicks the button on the template/HTML what will happen,

the class contains to main things to form the class

Properties or data Elements for use or bind in the view/HTML
Methods are functions that execute logic needed in the view

3.MetaData is what the class makes a component with out meta data the class will be regular JS/TS classes, Meta Data defines what this class is, it provides additional information about the component.
MetaData is defined with a decorator will see what decorator is later !

let's simplify with supporting Pictures

that is the two files mainly formed the component
in conventional to name the component componentName.component.ts | componentName.component.html
to show this is a component class or component template

here is the structure of the component class

first import what we need and it's @Component

The Metadata contains

Selector : is useful when you are using the class inside the view
Template, is the view associated with the class
style is the CSS or sass related specifically to the view

the class is now officially is a Component
remember component needs HTML,CSS,and Typescript simple

isn't it , so now you are fully understood the component let's see how we can create the component

Creating a component manually

here are the steps

create folder for your component in the app folder
create these files ComponentName.component.html, componentName.Component.ts, componentName.component.scss inside the folder
remember to replace component.Name => to appropriate name
and .scss file remember as we mentioned the other posts
inside the .ts file her we defined our class

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'wc-community',
  templateUrl: './community.component.html',
  styleUrls: ['./community.component.scss']
})
export class CommunityComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

import what we need
dont fogter the decorator and the decorator stars with @DecoratorName ({}) and pass an object
the decorator has this meta data selectorName , path to the html file , path to the style file

and fiannly we have to tell angular about this component
in the app.module.ts
the app.module.ts bootstraps our application is where the angular looks initially when your application loads

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {ComponentName } from './path of the component'


@NgModule({
  declarations: [
    AppComponent,ComponetnName
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

import the component from the path you created wtih the name of the class then add inside the declartions array

Yeeeeeeeeey 🎊 we created manually our first Component, here it's your turn try it to create a new component

see you soon buddy 🖐 love 💙 to hear a feedback from you how it went this journey with me

Angular for Newbies III

Kamaal Abshir — Thu, 23 Dec 2021 16:08:56 +0000

glad to post the third post of angular newbies series
to day we are going to talk about how to initialize angular project,
along the way i will cover a lot of topics that i cant cover in one post like release cycle of the angular and so on.

Installing Angular CLI

to create new angular project you need to install globally on angular cli !

🤔 But wait what is Angular CLI ??

Angular CLI : Angular command-line interface is where we put / write commands that executes our command,
and don't worry i will cover Angular CLI in another series Promise ! 😀

SO HOW DO WE INSTALL ANGULAR CLI ON OUR MACHINE
to install angular CLI you need to have

Node installed on you machine if go to this link and download node
And Code Editor, i will use vscode choose your favorite editor

after you successfully installed open your CMD / terminal / power shell depends on your operating system then type the following command

npm install -g @angular/cli

it will installed angular CLI Globally and npm is a package manager for the JavaScript programming language maintained by npm

after successfully installed now we are ready to rock and roll 🙋‍♂️ Yeeeeey !

now let's setup our Angular Project, go to your desired destination / folder and open with terminal then type the following command

ng new your-Porject-Name

that simple commnad genertes the angular project for us

then asks you if you would like to add angular routing just choose no! will add it manually later,

then asks you your preferred sylesheet just choose what ever you like css or other option i personlly like SCSS

wlaaaaah ! you made you first Angular Project

Congratulations 🎊 🎊 🎊

then let's See He Generates for Us

as you see that simple command generated for a bunch of files

DON'T BE AFRAID 😰

it is simple let see what each one is and what is do okay ...

here are the folders and files inside our project

1. node_modules : is where all our libraries and their libraries store and please don't edit them manually

2.src this is our main folder where we edit delete and all the magic here like creating components, services , modules and so on this is where 99.99% work happens

3. browsersliststrc this files holds the list of browser that our application support and is used by the build system to adjust javascript and css output to support our listed browsers there again you dont need to edit this file

4. editorconfig this file holds the editor configuration it helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs

5. gitignore this file holds the list of items,files,folders that wont upload/save to the GIT

*6. angular.json * provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI.

7. karma.conf.js it holds the karma configurations and it is used for testing , to test it you app

8. package.json & package-lock.json these files are provides us a starter set of packages, some of which are required by Angular and others that support common application scenarios.

9. the other three files are files that configure the typescript since angular uses typescript

Heeey you see easy isn't it so dont worry you will adapt these files and you will be expert soon enough Promise.

hey that is it today you did an amazing job

see you buddy 🖐 and stay health and please if you find this useful please share it to the others

thanks

Angular for newbies II

Kamaal Abshir — Wed, 22 Dec 2021 17:04:09 +0000

Part II

before i start the second part of our series let's remind you to read Part I if you didn't

OK let's begin ARE YOU READY 🖐
as we mention on our previous post we defined angular according the definition of angular team there is some cryptic keywords so let's continue
the definition was

A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more

so what is library ?
let me simplify you what library means, library is like building your own home from scratch you have the ability to chose how many rooms and kitchens your home will have,
so well integrated libraries means angular built in using different libraries and work each other effort less and at your convenience

so what those libraries Do
as you see in the definition each library responsible for one task like rooting i will come back what routing is! that means library is like rooms that builds your home as your home have different rooms for different purpose is like that !

ARE YOU STILL WITH ME ? 🖐 am down here 👀

So what is Routing
Ooooooops !! 🙈

i almost forget to tell you that Angular is Single Page Application SPA means the whole application / website is served on a single page all different look alike pages you see are not real pages they are component that being rendered on the same page
and that is where the router comes in handy it allows us to travel inside our components back and forth

and also form management and client communication are libraries that responsible for specific task like the router

wooow 😲 we did an amazing journey you and me !!

so let's grab a cup of coffee ☕️ you earned it

are you thinking what am thinking ?

how to create angular application ??

that is the next Post !
see you buddy 🤪 and stay Healthy

Angular for newbies I

Kamaal Abshir — Wed, 22 Dec 2021 16:13:21 +0000

Part I

before i start talking about angular this is the first post am taking about angular and it will be series of posting to cover what is an angular and how to use it !

What is an Angular ?

angular is JavaScript framework/tool that help you build interactive and rich websites
according the angular website they defined angular is

A component-based framework for building scalable web applications

A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more

A suite of developer tools to help you develop, build, test, and update your code

oooooh! 😩 that is not a definition a beginner can understand Right? are you feeling what am feeling ?

let's simplify what that definition means

Component Based : it's an approach/way that focuses on developing and maintaining a reusable piece of code, it is a way we can break down our entire code into smaller pieces.

Why do wee need to break our code into smaller pieces ?🤔
Hmmm! Good Question ✅
because it helps us to maintain our code easily, it helps our component to stay up to date, it also helps us to fix bugs and so on !

All Right now we have understood what means component based Yeeey 🙌 you earned a cup of coffee ☕️

So what is a framework ?
according to code academy frame work is

A framework is a structure that you can build software on. It serves as a foundation, so you're not starting entirely from scratch

yep you heard it right you don't need to start from scratch angular team already took care of that work thanks to them ?

in our next post will cover what they mean libraries , routing, form management, client server communication and a lot of cryptic words

thanks for reading it hope you liked it and tell me what to cover next in the comment section
see you 🖐 and stay healthy 🤪