DEV Community: NikSS

A Quick Guide to Deploying a Parcel/React Project on Firebase 🎉

NikSS — Wed, 25 Oct 2023 19:45:00 +0000

Introduction:
Parcel is a fast, zero-config web application bundler. When combined with React and Firebase hosting, it offers a smooth development-to-deployment flow. However, there are some steps and configurations you should be aware of. In this post, I'll walk you through deploying your Parcel/React project on Firebase.

Prerequisites:

A React project set up with Parcel.
Firebase CLI installed and authenticated.

Step-by-step Guide:

Update Your package.json

Add the following scripts to the scripts section of your package.json located in the root directory of your project:

//json
"scripts": {
    "clear-build-cache": "rm -rf .cache/ dist/",
    "dev": "parcel src/index.html",
    "build": "cross-env NODE_ENV=production parcel build ./src/index.html --public-url ./",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "test": "echo \"Error: no test specified\" && exit 1"
}

A quick breakdown of these scripts:

dev: Runs your project locally.
clear-build-cache: Clears the .cache and dist directories before executing your build.
format: Runs prettier to format all your code files.
Ensure that the index.html path in the build script is accurate.

2. Clean the Build Cache
Either manually remove the dist and .cache files or use the script we just added:

npm run clear-build-cache

3. Build the Project

Execute the build command:

npm run build

This will generate the dist folder for your project.

4. Configure Firebase

Initialize Firebase in your project, ensuring the public directory in firebase.json points to the dist folder:

{
  "hosting": {
    "public": "dist/",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

5. Deploy to Firebase

Now, all that's left is to deploy your project:

firebase deploy

Conclusion:

Deploying a Parcel/React project to Firebase is straightforward with the right configurations in place. I hope this guide makes the process even simpler for you. If you found this helpful or have any questions, feel free to drop a comment below!🎉

Getting Started with React Native and Expo: An Introduction to.env Files

NikSS — Sun, 26 Feb 2023 17:44:02 +0000

Getting started with React Native and Expo can be a great way to build mobile applications, especially if you're already familiar with React. One important aspect of app development is the use of environment variables. In this article, we'll show you how to use a .env file to manage your environment variables in a React Native project built with Expo.

What is Expo?

Expo is a framework for building React Native apps. It is a set of tools and services made for React Native. It will help you begin building React Native apps with ease. Expo provides a command-line interface that allows developers to easily create, build, and publish their apps.

What is a .env file?

Environment variables are a set of dynamic values that are used by your application at runtime. For example, you may want to use a different API key or URL depending on whether you're running your app locally or in production. A .env file is a simple text file that contains key-value pairs, and is used to store environment variables for your app.

Using a .env file with Expo

To use a .env file with Expo, you'll need to install the "dotenv" package. This package will load your environment variables from your .env file, and make them available in your app.

Here are the steps you'll need to follow:

First, navigate to your project's root directory in your terminal.
Run the following command to install the dotenv package:
1- npm install dotenv
2- Create a .env file in your root directory. Here's an example of what it might contain:

//.env file
API_KEY=your-api-key
API_URL=https://api.example.com

3- When configuring Babel, remember to add the path to your .env file as well. This file should always be located in the root directory of your project. See below

//babel.rc
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
  [
    "module:react-native-dotenv",
    {
      moduleName: "@env",
      path: ".env",
    },
  ],
],
};
};

Now, you can use your environment variables in your code. Here's an example of how to access the API key:

import { API_KEY } from '@env';
console.log(API_KEY);

In this example, we're using the "API_KEY" variable that we defined in our .env file. The "@env" syntax is used to tell Expo to load the variable from the .env file.

Please note that our .env file should always be located in the root directory of our project. To ensure the security of our API, it's important to add the .env file to the .gitignore file. This will prevent the file from being pushed to the repository and keep our API credentials safe.

Conclusion

Using a .env file to manage your environment variables can be a great way to keep your app's sensitive information secure, and simplify the process of deploying your app to different environments. By following the steps outlined in this article, you can get started with managing your environment variables in a React Native project built with Expo.

Questions-I-ask-during-my-interviews

NikSS — Tue, 17 Aug 2021 21:40:22 +0000

Goals and Objectives

This repo is a collection of interview questions that help identify your future company. These are the questions I've collected during my interviews with different companies. Remember they are interviewing you, and you are interviewing them.
Remember, these questions can be different for each company, but I hope this repo can help you succeed in your interview process.

Company culture

How are your teams structured?
How many women work in this team?
What's your process to ensure you have diversity in other ways?
How does internal communication work in your company?
What is the on-boarding process in your company?
How much vacation do people get?

Community involvement

Do you contribute to open source projects?
Do your employees speak at conferences about the work they do? What is the company's support for that?

Career development

Do your company support continuing education? This is an important question if you want to grow in your field.
What are the ways your company supports career development?

Engineering practices

Can you give me an example of someone who's been in a technical role at your company for a long time, and how their responsibilities and role have evolved?
How is performance evaluated?
How is this team structured?
Tell me more about this team?
Are there any specific written goals for this opportunity?
Is there a written road map available to developers? And how far into the future does it extends?
Do you use TDD or BDD in your company?
Do you do code reviews?
Do you have a dedicated designer or team of design?
Who is the best candidate for this job (Characteristic)?
Who is responsible for deployment? How often do you deploy?
Can I see some code from the team you are interviewing? Ask for open source projects.
How often do teammates pair in this team?

Management practices

How is performance evaluated?
How are technical decisions made and communicated?
How are decisions made in this team?
How often do we have meetings? Do we have morning standups?
Let's say my interview went well, and I get this job. In a year, what skills do I need to show to consider this hire a successful hire?
Does this position require travel?
How much are you planning to hire this year?

Other

What do you wish you had known before joining this company?
Why did you choose to join this company?
Can you give me an example of an issue this team is facing and what's currently being done to address that?
At the end of your technical interview, ask if they are willing to share some feedback with you.