Search for a command to run...
Full Stack Developer | Freelancer | JavaScript | React | Nodejs.
Loves sharing knowledge through technical articles.
Dev.to: https://dev.to/myogeshchavan97
https://linktr.ee/myogeshchavan97
Thank you so much Savio Martin
Wow some great info here that not everyone is aware of thanks for sharing Yogesh Chavan
Thanks for reading Andrew Baisden
In this tutorial, you will build a Task Management App using Next.js 16 and Prisma 7 from scratch. By creating this app, you will learn: How to set up Prisma 7 with the new Rust-free architecture How to configure a database with Prisma's driver ada...
If you're a React/Next.js developer who diligently updated your packages last week after the critical React2Shell vulnerability (CVE-2025-55182), I have some frustrating news: you need to update again. Security researchers, while probing the patches ...
Is your React app dragging its feet, but you can’t pinpoint the cause? You might think you’re following the best practices, but some common development patterns are actually degrading your app’s performance behind the scenes. In this article, we’ll u...
How to Use Separate SSH Keys for Company and Personal GitHub Accounts Managing multiple GitHub accounts is a common challenge for developers who juggle both personal and professional projects. It becomes even more complex when you want to use differe...
Have you ever built a React app only to realize that users from different countries can't use it effectively because it only supports English? In this tutorial, you'll learn how to build truly global React application using internationalization (i18n...
In this article, we will explore the lesser-known but very useful features provided by create-react-app.
So let's get started!
Sometimes we need to test our app on HTTPS to check if all the APIs are working properly before deploying to production.
Create-react-app provides an easy way of doing that.
Create a .env (dot env) file in your project folder and add HTTPS=true inside it like this:
HTTPS=true
and restart your app by running yarn start or npm start command and now your entire application will be served on HTTPS.
In every application, we have import statements where we have to come out of the current folder to reach another file like this:
import { login } from '../actions/login';
import profileReducer from '../reducers/profile';
So we have to check which folder we are in and then add those numbers of double dots to import another file. Create-react-app makes it easy to handle that.
Create a new file jsconfig.json in your project folder and add the following code inside it:
{
"compilerOptions": {
"baseUrl": "./src"
}
}
Here we specified the base folder where all your files are present. (mostly it’s the src folder in the React application).
So now we can simplify the above imports as shown below:
import { login } from 'actions/login';
import profileReducer from 'reducers/profile';
With this configuration, it will take src as a base URL now, so we only need to specify the folder path starting inside the src folder as we've done in the above code.
This will avoid adding extra dots for deeply nested paths.
Environment variables are important because they allow us to keep private information secure. It can be a username or password or API key.
They also allow us to supply our app with different data values based on the environment (dev, staging, prod, etc).
Create-react-app allows us to read environment variables without using any external library.
To create environment variables in React, create a new .env (dot env) file and declare the environment variable inside it like this:
REACT_APP_API_BASE_URL=environment_variable_value
REACT_APP_PASSWORD=your_password
It’s important to start your environment variable name with REACT_APP_ so create-react-app will be able to read it.
Once you create a .env file with your variables, it will be available in your React app inside the process.env object.
process.env.REACT_APP_API_BASE_URL
process.env.REACT_APP_PASSWORD
Check out the below Code Sandbox Demo to see it in action.
Note: You should not push the .env file to your git repository for privacy reasons so make sure to add the .env entry in your .gitignore file.
Check out my recently published Mastering Redux course.
In this course, you will learn:
and then finally we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.
Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.
