DEV Community: Eke Chinedu Kenechukwu

‘expo’ is not recognized as an internal or external command

Eke Chinedu Kenechukwu — Sat, 26 Feb 2022 19:49:09 +0000

So you just installed expo globally on your windows 10, using

npm install -global expo-cli

After which you tried to be sure expo is installed and you tried
expo --version

but you get this error below
'expo' is not recognized as an internal or external command

Don't panic, to solve this, simply run the command below on cmd (as an administrator)

setx path "%path%;C:\Users\<USERNAME>\AppData\Roaming\npm

Thereafter, You should see the following

WARNING: The data being saved is truncated to 1024 characters. SUCCESS: Specified value was saved.

that let's you know you were successful.

Now run
expo --version

you should now see the version of expo installed, and that you can now use the expo command.

But if that doesn't work,
That means you will need to manually add the path to your machine's Environment Variables.
At the time of this article,

I'm using

npm version 8.5.2

node version 16.14.0

which are the latest versions and have corepack enabled in node, this helps me to easily update yarn. To enable corepack, simply run

corepack enable

Now, after the update to the latest stable/LTS versions of npm and node,
go to windows search, search for edit the system variables , enter the option
select Environment Variables (located at the bottom of the box)
under system variables
scroll and select Path and click on Edit

NOTE: PLEASE DO NOT CLICK THE "NEW" BUTTON UNLESS YOU KNOW WHAT YOU ARE DOING, BECAUSE ANY CHANGE, WILL WIPE OUT EXISTING PATHS.

after clicking on Edit, select New and then add the npm path to the list.
usually, the npm package is saved in
C:\Users\<your computer username>\AppData\Roaming\npm

after adding that path,
click "ok" on all boxes, close your terminal, reopen your terminal,
run expo installation again.
npm install -global expo-cli

after that, your can check if it successfully installed using
expo --version
expo-cli --version

At the time of this article, expo and expo-cli is at version 5.2.0

I hope this was helpful. Feel free to reach out if your installation challenge persists.

Happy Hacking…

How to Customize Ant.design UI Library Variables.

Eke Chinedu Kenechukwu — Thu, 21 Jan 2021 00:29:50 +0000

This post seeks to give the reader a straightforward fix to customizing the ant.design UI library for react, style variables.

I will like to be as brief as possible, so I will assume you have basic programming knowledge, Webpack, babel, Command line terminal, npm, HTML, CSS, Less and Javascript knowledge, ES6 syntax, React and are familiar with object oriented programming.

Ant Design is a UI library for react developed by Alibaba. It’s really nice and useful in making your react project solid and saves us time. To configure Ant Design, you need to know that the library makes use of less, and therefore, overrides will be done using a less file.

No need to journey far and change your css style sheets from .css to .less, then the lessc command and all that lengthy work which if not careful, can break something and create extra work.

To get started, create a .less file in the root directory of your project, call it say theme.less (for this demonstration), write the variable you wish to override in the theme.less file.

A full list of Ant.design variables can be found here. Careful now, ant design variables are inter-dependent, so changing one variable’s value can alter the presentation of other components.

A good example is, if you alter the font-size base, to say 3vh, your fonts will look bigger and better, but your search box will get messed up quick.
So for simplicity and to make sure this works, simply just write a new primary color in the theme.less file, use say #ff66cc to make things obvious.

Then go to your cmd, cd to your project’s directory, install babel-import-plugin

npm install — save-dev babel-import-plugin

then go to your .babelrc file to add the plugin.

“plugins”: [[“import”, {“libraryName”: “antd”, “libraryDirectory”: “es”, “style”: true}]]

This plugin aids override the defaults.

After those steps, go to your common config file and tell webpack how to handle less files and specify a hack for it.
Make sure you have less and less loader already installed. Now in your common config, specify how webpack should less file.
(see the image below)

Save and move on.

Here on,
any ant.design component you import into your project will now display the new #ff66cc primary color.

I hope this was helpful.

Kindly follow me on twitter.

Git for Interns

Eke Chinedu Kenechukwu — Wed, 20 Jan 2021 00:27:40 +0000

Landing your first real tech job more especially as an intern can be exciting and daunting at the same time.
The feeling of excitement quickly turns to some chilly nervousness that would be felt in your spine, when the Senior dev grants you access to the project repo and assigns to you your first task.

This is because you are finally stepping out of the tutorials world to earth where real problems need to be solved, new features need to be added to a project, and bugs need to be fixed. In an instance, you realize you only know git clone “https” and really don’t have the faintest idea of what cloning using SSH is about and you might soon drop dead…lol

Well, don’t fake your death yet,
I’ll help you get a good grasp of what you should know about git for a start, best practice and subsequently, other parts you’d learn from experience.

So I beg you before you enter the world famous
git clone “https”
Please introduce yourself to git. Configure your git so that it recognizes you and this makes authentication on Github, Bitbucket, Gitlab etc. A lot straight forward.

git config --global user.name "your name" //this tells git your name
git config --global user.email your email //this tells git your email

One important thing about git config:

git config has --local, --global and --system levels and corresponding files.
So you may use git config --local, git config --global and git config --system.

By default, git config will write to a local level if no configuration option is passed. Local configuration values are stored in a file that can be found in the repository's .git directory: .git/config
Global level configuration is user-specific, meaning it is applied to an operating system user. Global configuration values are stored in a file that is located in a user’s home directory. ~/.gitconfig on Unix systems and C:\Users\<username>\.gitconfig on Windows.
System-level configuration is applied across an entire machine. This covers all users on an operating system and all repositories. The system level configuration file lives in a gitconfig file off the system root path. $(prefix)/etc/gitconfig on Linux systems. On Windows this file can be found in C:\ProgramData\Git\config.

To view global values, you can use

git config --global --list

If you will be creating a repo, you use

git init

or you can

git clone “https”

a working repository.

Usually after cloning a working repository, you enter

npm install

to download node modules.

First, checkout out from the working repository you cloned. This means creating a new local branch out from the cloned branch(best practice). use

git checkout -b branchname

-b signifies new branch. Ask the Senior dev the way he’d like you to name your branch names. You can be asked to label branch name with prefix “feat” for feature “fix” for a fix to flag the content of the branch before it’s merged. An example, you can find branch names like feat/footer — means this branch is about the creation of a footer feature to the project. one branch per fix or feature(best practice).

Now when you have finished a fix or feature on a branch and want to open another new branch, to add a fix or feature, please checkout(switch) to the branch you initially cloned and create a new branch from there to avoid git reference and index issues(trust me, you don’t want this headache) in the long run. use

git checkout branchname

— notice there’s no -b. This is because you are not creating a new branch, but you are switching to an existing branch.

To see a list of all your branches and the current branch you are on, use

git branch

Soon after, you run the dev server and start making saved uncommitted changes, now you have to commit those changes at some point in the branch work flow, use

git commit -m "meaningful Commit message"

or better still, so you don’t embarrass us and for us to still be friends, kindly go to the source control section in vs code(yea, I assume you use vs code, that’s what I use) and use the commit button, enter a meaningful commit message in the input box(best practice).

So after adding commits, you want to push your code for merge right? use

git push origin branchname

or better still use the vs code button, click on origin”https”link and you are done. Then go to the project repo and open a merge request.

To push all your branches to remote repo, use

git push --all origin

To merge a different branch in your active working branch, use

git merge branchname

To update your local branch from remote repo, use

git pull origin branchname

To delete git branch locally, use

git branch -d branchname

git branch -D branchname

The -d option will delete the branch only if it has already been
pushed and merged with the remote branch. Use -D instead if you want to force the branch to be deleted, even if it hasn't been pushed or merged yet.

To delete a branch remotely, use

git push <remote> --delete branchname

You can also use this shorter command,

git push <remote> :branchname

If you get the error below, it may mean that someone else has already deleted the branch.

error: unable to push to unqualified destination: remoteBranchName The destination refspec neither matches an existing ref on the remote nor begins with refs/, and we are unable to guess a prefix based on the source ref. error: failed to push some refs to 'git@repository_name'

Try to synchronize your branch list using:

git fetch -p

The -p flag means "prune". After fetching, branches which no longer exist on the remote will be deleted.

I do hope this was useful to someone out there.

Feel free to connect with me on
Twitter
LinkedIn