DEV Community: Ekim Kael

How to build a React Native android application locally with Expo 50

Ekim Kael — Wed, 03 Jul 2024 04:48:30 +0000

If you have sensitive information that you don't want to get on the Internet and share with Expo, or if you don't have the money to wait your turn in the queue, it's possible to build your application locally, and that's what we're going to look at today.

IMPORTANT: You're more likely to get it right if you're on macOS or Linux. For Windows you need to have WSL installed.

1. eas(Expo Application Service) account

First of all, go to https://expo.dev/ and create an account. Otherwise it will be difficult to follow this article.

2. Install eas-cli

EAS CLI is the command-line application you'll use to interact with EAS services from your terminal. To install it, run the following command:



npm install -g eas-cli

3. Login to your account



eas login

4. Configuring the build

To configure your project's build, use the command



eas build configure

This command also initiates your project on your account on the expo servers.

5. Credentials.json

This part is important when you want to produce the version of your application that will go on the AppStore or Google Play Store. It contains the credentials and certificates your application will need to be signed and recognized by the Play Store (in our case).

If the credentials are located on your machine, you must specify this in the eas.json file, otherwise it will look for them in your online project. To do this, you can add this line to your eas.json file on the appropriate build profile.



credentialsSource: 'local'

6. Java 17

You must have Java installed on your machine, otherwise you'll get the above error. Version 17 is the recommended one. I haven't tested higher versions, so I can't say.

7. Environment variables

When you do a local build, EAS secrets are not supported. Instead, you need to use environment variables. If you have environment variables, expo will not take .env.local into account. So you'll need to create an .env file and then delete it every time you finish a build.  Don't add your .env file to your .gitignore file - it will be ignore.  We'll look at how to automate the whole process from step 5 onwards in a future article.

8. Files not to be committed:

As I said earlier, the informations contained in these files are sensitive, so it must not be possible to find them online:

credentials.json
Your keystore file (.jks)
.env

9. Launch the build

Once all the elements are ready, you just need to know the profile for which you want to produce the application and launch the command:



eas build --platform android --profile (development/preview/production) --local

If you take the time to observe you'll see that Expo logs everything it does during the process and in the first 2 lines you can see that it:

loads environment variables
Uses local credentials (if specified)

Once the process has started, you wait a few minutes for it to finish and tell you where to find your application's compiler file, and voila!

Limitations

Some of the options available when building online are not available locally:

You can only do one build at a time and for one specific platform (android or iOS).
You'll have to update the expo.android.versionCode or expo.ios.buildNumber yourself.
Caching is not supported.
You must ensure that the environment has all the necessary tools:
- Node.js/Yarn/npm
- Fastlane (iOS only)
- CocoaPods (iOS only)
- Android SDK and NDK

I hope you've found this article useful, and I'll see you soon to automate the process. Ciao!

How do you stop repeating yourself ?

Ekim Kael — Tue, 28 Sep 2021 08:07:26 +0000

Do you guys have something like feature helpers?
Like you want to make login or authentication, you grab it/clone/copy it to your application and you're ready to go?

II'm building React/Nextjs app everyday and I feel a bit tired to have to repeat the process on each project

Chakra UI: Theme - Update Tab style

Ekim Kael — Sun, 05 Sep 2021 07:54:34 +0000

I'm working on a project with Chakra UI where I need to create a navigation but it's more like tabs so I chose to use Chakra UI Tabs. I'm personally not a fan of the approach of writing CSS rules in components so I always prefer to modify the theme to fit my needs.

In this case, I really needed my Tabs to look like a classic navbar so I took the unstyled variant.



<Tabs variant="unstyled">
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

And here is how to change the style of a Tab in the theme file 👇🏾
The first thing to note is that all child styles end up in Tabs.
So if you want to change Tablist or TabPanel, it will also be done in the Tabs attribute at the theme file.



export const theme = extendTheme({
    Tabs: {
      variants: {
        unstyled: {
          paddingY: '4',
          marging: '0',
          tab: {
            _selected: {
              color: 'white',
              boxShadow: 'none',
            },
          },
        },
      },
    },
  },
});

🎉

Back to yarn 1x after migrating to the 2x "Berry" version

Ekim Kael — Sat, 24 Apr 2021 17:18:31 +0000

If you are like me and wanted to test yarn 2x "Berry" and a few seconds later you were doing npm uninstall -g yarn and then npm install -g yarn but the version still was 2x, you can revert to the 1x version by doing:

yarn set version 1.22.10

(knowing that 1.22.10 is the version I want to use)
Bye 👋 ✌️

Flickering with React/Nextjs

Ekim Kael — Sat, 27 Mar 2021 17:24:43 +0000

Hi guys, i've this behavior happening when i try to test my authentication.
I wonder if someone have already deal or knows how to deal with it.

Thanks

Customers chats integration with React

Ekim Kael — Fri, 22 May 2020 06:57:26 +0000

Does anyone here have already add those customers live chats? stuff like: Tawk with React? I copied the code they give me and put it on the index html but it didn't work

How to manage a team when deadlines are short

Ekim Kael — Sat, 01 Sep 2018 07:58:35 +0000

I recently got a job as a designer.Last week I was promoted to head the frontend and design team.Yeah!✨🎈🎉🎊

No, no yeah!!

The joy disappeared very quickly because I have to manage my team but I'm lost on one thing in particular: scheduling tasks.

As far as design is concerned, I'm still okay (but I'm interested in new approaches) but I don't know how to plan the tasks from the frontend.

We will use ReactJS as framework.so if there are methodologies we can use with thanks.

One of the major concerns is time.

I wanted to start on Brad Frost's atomic design but you need an MVP by the end of the month and the boss wants results every week.

How to deal with it?

Any help is appreciated

React, React-Router and Fetch API

Ekim Kael — Mon, 09 Jul 2018 17:12:36 +0000

I'm having a problem with my React.

I use React-Router and the Fetch API.

So... I have a list of products and when I click on one, I am redirected to a route to display more details on the product in question but also to display the other products.

Say: reactapp.com/all for all products

reactapp.com/p/productID my two URLs

My problem:

When I am on reactapp.com/p/productID and I click on another product, the URL is updated but the product information is not updated.

When I click a second time, the product information I previously clicked is displayed
I don't know if you understand me.I have a data restriction at the moment.so I can't deploy so you can see it.
Please if you've understood what i mean, help me

Let's talk about clients

Ekim Kael — Fri, 29 Jun 2018 13:36:50 +0000

Hi,
I think there are freelancers here too.
So I really started this activity as a developer this year, and although I like working from everywhere and (sometimes) at times that suit us, I struggle.
Then I humbly come to you for help.
I'd like to know how you're doing:

find clients
what to do, what not to do
If possible, is it better to meet the client when they contact you first?
how do you establish your prices (are there apps that make your work easier?) etc... Here I would like us to linger more on the Internet but everything is good to take. Even on the field, it could help someone

Thank you

GraphQL these questions that we ask ourselves but that the tutos do not address

Ekim Kael — Tue, 19 Jun 2018 11:13:17 +0000

I was supposed to start a job today and all my schedule was done around that but for lack of any confirmation from the client and the team leader, I still looked on the internet.productivity level: 0, energy level: 0.it's when I remember that yesterday I was well surprised to know by doing a little waking that:

WordPress can be converted to REST API which returns JSON responses and then
GatsbyJS could recover them and with React in the background, transform all that into a static site or even a PWA.

Being a JAM Stack aspiring I was very quickly interested but having already tried to know what all the components of this Stack are for, I still block on a super powerful concept and tool that gives it a lot of charm I named: GraphQL

So...what is GraphQL?
What's the point?
How does it work?

On the documentation you will find answers to these questions. I also advise you the post of: Grigor Khachatryan
There are many tutorials that also talk about it but which for me treats it badly because it launches itself all very quickly to the writing of GraphQL queries that to answer many rather important questions on which the novices stumble.
Personally here are the questions I ask myself:

Why do I compare GraphQL to REST?
Can't it be added to REST?
one thing I like about REST is the way it allows us to write urls which is pretty sexy, so what about GraphQL?
Using enough ExpressJS/HapiJS are there solutions to integrate GraphQL to these frameworks?
At what level does GraphQL appear in an MVC architecture?(for example)

I just realized I've already found an answer to a question.
These stupid questions can be turning in the heads of many I'm sure unless I'm the only one (ohh shame!!!!)

On the documentation they give an excellent resource: how to graphql.I looked at the proposed route and it helps to answer some questions so I check it out.I'll get on it soon.

you can add the questions you ask yourself in comments

How to make many http requests with react

Ekim Kael — Wed, 13 Jun 2018 13:47:42 +0000

Hi, please i'm stuck.
is somebody knows how to make many request in a react component or route?

componentDidMount = () => {
    const { match: { params } } = this.props
    fetch(`/w/${params.work}`)
      .then(res => res.json())
      .then(work => this.setState({ work }))

    fetch('/works')
      .then(res => res.json())
      .then(otherWorks => this.setState({ otherWorks }))
}

something like this that works.
I'm a beginner with React so i don't really want things like Redux
i just want a beginner way.The first fetch work but not the second

how to be self-taught nowadays

Ekim Kael — Mon, 11 Jun 2018 00:14:19 +0000

The technology is such nowadays that you barely discover something that three days later you are presented with another thing as a miracle cure for what was done three days earlier.
So when you start out, you end up with two camps: those who love the" from scratch" and those who pray to their frameworks 5 times a day and since you don't know anything...argh!!
Personally, I'm one of those people who think you have to go from scratch sometimes, well, if I used to go from scratch today, I understood that it's a waste of time, energy and therefore money.

I used WordPress some time ago to make a blog (like a magazine) and although starting on WordPress I found myself finishing up when I counted the hours of work it took me, not even a week.I don't know WordPress, but I managed to create a child theme, add and model templates from the code.I left PHP it's been over 3 years today for Node and I'm very proud of what I accomplished in such a short time with WordPress.

All this to say that it's nice to want to go from scratch especially when you're just starting out but I recommend this to those who are still young and by young I think of those who are in middle school, high school or who have just entered college.
If you are a little older and you have responsibilities I don't recommend it.learn a framework and learn it well.so that you can solve most of the problems you encounter there.all programming languages have things in common:

you declare variables and constants
you make loops
conditions
functions
embarks with them most often 2 programming paradygmes: the imperative and the OOP.

What you should always keep in mind:

there are many ways to solve a problem
STACKOVERFLOW and Google are there for you. remember I said I finished my work in barely a week? it's because of them.
Ask questions - You don't want to be the one who doesn't know anything when you can't come up with a problem? can you be stupider than that?
You can combine your learning and / or your work with personal development... There are many methods to design an application but if the most known one came to us from architecture is that you can look elsewhere and get inspired to work effectively and not get swallowed up by the work.
Find a community - It goes without saying that it should be focused on the domain, the language and the frameworks and CMS you use.

Since then I've been talking but I've just told you that I'm from what sometimes likes from scratch without telling you how I think it's more efficient to work for a self-taught with responsibilities.

The most hype language of the moment?the one you've always liked?no matter when you get away with it (both learning it and trying to make a living with it).
Once you are there and you already master the elements that all the languages have in common, put yourself to a framework, a CMS etc... Just set yourself a goal with your framework however small it may be, you will learn a lot.
After 2 - 3 personal projects with your framework, find out how it works, by this procedure you will gradually go back to the language and learn more about the specificities of it... In the end you will join those who like to go from scratch yes! because they are more likely to master all aspects of their languages and control all the processes of an application they have designed.

In the end you know how your language, your framework works and you can participate in its improvement. it's like starting as a technician to end up as an engineer it's just rewarding as not possible. but I insist on the fact that after mastering the framework you learn how it works.

The technology today is evolving at an exponential speed, I wouldn't tell you not to learn all the details of a language from the start but you have to be efficient and catch up very quickly with the crew of this boat that you took when it already had a lot of miles on the clock.

Thanks to those who read until the end, thank you for giving me your point of view I would be happy to read it.