Source maps are great during development as they help map your minified code back to the original source code, but when deploying to production, it’s best practice to disable them for security reasons. In this guide, we’ll go over how to create a basic React application, and hide source maps for production using the
.env file by setting GENERATE_SOURCEMAP=false.
Step 1: Install Node.js and npm
Before you begin, you need to have Node.js and npm (Node Package Manager) installed on your machine. Visit Node.js to download and install the latest version.
Once installed, open your terminal and verify the installation:
node -v
npm -v
This will display the installed versions of Node.js and npm.
Step 2: Create a React Application
To quickly set up a new React app, use the create-react-app tool. Open your terminal and run the following command to create a React app:
npx create-react-app my-react-app
For TypeScript support, you can use this command:
npx create-react-app my-react-app --template typescript
This will create a new folder my-react-app containing all the files needed for a basic React project.
Step 3: Navigate to the Project Directory
Once the project is created, navigate to the project directory:
cd my-react-app
Step 4: Start the Development Server
To view your new React app in action, start the development server by running:
npm start
This will start the app and open it in your default browser at http://localhost:3000. You can make changes in your code, and the app will automatically reload with those changes.
Step 5: Hide Source Maps in Production
To hide source maps in your production build, create a .env file in the root of your project, if one doesn’t already exist. Add the following line:
GENERATE_SOURCEMAP=false
This ensures that when you build your app for production, the source maps won’t be generated, which is helpful in keeping your original code safe from prying eyes.
Step 6: Edit and Develop Your React Application
Open the project in your code editor, such as Visual Studio Code or Sublime Text.
Modify the files inside the src directory to start building your app. The main entry point is src/App.js or src/App.tsx if you’re using TypeScript.
Step 7: Install Additional Packages
React projects often require additional packages or libraries to add more functionality. For example, to make HTTP requests using Axios, run:
npm install axios
You can now use Axios or any other installed package in your React components.
Step 8: Build and Deploy Your React App
Once your application is ready, build it for production using the following command:
npm run build
This will create an optimized version of your app in the build directory, which can be deployed to any hosting service. The GENERATE_SOURCEMAP=false line ensures that no source maps will be included in the production build.
Optional: Configure PowerShell (Windows Only)
If you’re using PowerShell and encounter issues with running npm commands, you might need to configure the execution policy:
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
This command allows you to execute scripts downloaded from the internet (like Node modules) without issues.
With this setup, you now have a fully functioning React application. By configuring your .env file to hide source maps in production, you can improve security and optimize your final build. Happy coding!
