Structure and File Setup
Folder and File Structure
Folder Structure
- Create a folder structure that makes sense for the project
- For a React project, have the following set up
Note, this structure is based off of the Bulletproof React project
src
|
+-- /assets # Assets folder can contain all the static files such as images, fonts, etc.
+-- /components # Shared components used across the entire application
+-- /config # All the global configuration, env variables etc. get exported from here and used in the app
+---- .env # Environment variables
+-- /data # Any stored data that is used across the application (my own addition)
+-- /features # Feature based modules
+-- /hooks # Shared hooks used across the entire application
+-- /lib # Re-exporting different libraries preconfigured for the application
+-- /providers # All of the application providers
+-- /routes # Routes configuration
+-- /stores # Global state stores
+-- /test # Test utilities and mock server
+-- /types # Base types used across the application
+-- /utils # Shared utility functions
- For a Next project, consider which folders are not needed, e.g. Routes would not be needed as Next handles routing via the pages folder
- To set up the above structure, first, navigate to the root folder of your project and then run the command from the linked file in the terminal
Component Set Up
See point 4 of 10 Best Practices in Front End Development (React)
Structure your components in the following way, using Export Barrelling (point 2);
--components:
----Button
------index.ts (exports everything necessary)
------types.ts
------styles.css
------utils.ts
------component.tsx
----Icon
------index.ts (exports everything necessary)
------types.ts
------styles.css
------utils.ts
------component.tsx
----Input
------index.ts (exports everything necessary)
------types.ts
------styles.css
------utils.ts
------component.tsx
File Set Up
- Also, it is best practice to have a certain few files within your project
Note, these files are already created in the above command
-
README.md file in the root of the project
echo "# Project" > README.md -
An empty .env file in the root of the project
echo "# Add an API Key" > .env echo "API_KEY=AddKey" >> .env -
.gitignore file in the root of the project
echo "# local env files" > .gitignore echo ".env" >> .gitignore- Gitignore.io is a great resource to generate a .gitignore file for your project
.env Files and Variables
- To securely store environment variables, create a .env file in the root of the project
- Then create a .gitignore file in the root of the project and add the .env file to it
- For CRA, you can create .env variables named as
REACT_APP_and they will be available in the browser- Example:
REACT_APP_API_KEY=1234567890 - You can then use the variable in the code as
process.env.REACT_APP_API_KEY - See this article
- Example:
- For Vite, you can create .env variables named as
VITE_and they will be available in the browser- Example:
VITE_API_KEY=1234567890 - You can then use the variable in the code as
import.meta.env.VITE_API_KEY - See this article
- Example:
- For Next.JS;
- Example:
API_KEY=1234567890 - If you're just working in Node.JS, you can then use the variable in the code as
process.env.API_KEY - If you're working in the browser, you have to prefix the variable in the code as
process.env.NEXT_PUBLIC_API_KEY - See this article
- Read this Medium story if still have issues
- Example:
References
ESLint and Prettier Config
- Copy over the .eslintrc.json and .prettierrc set ups from a good project (e.g. Dorkinians Mobile Stats)
- Make changes if any are required
- Consider the below references if needed
References