chore: change architecture, fix react-helmet

README.md

@@ -22,8 +22,11 @@ yarn start
 ```
 
 ## Features
+- Starting FSD architecture
 - Typescript
 - Eslint & Prettier
 - Support of runtime environment variables with dynamic values
-- normalize.css and shared reset css file
-- React Helmet, axios, classnames libraries
+- Normalize.css and shared reset css file
+- All necessary meta tags for SEO in public/index.html
+- Axios instance
+- React Helmet & classnames

template.json

@@ -4,6 +4,7 @@
       "@types/node": "^20.8.7",
       "@types/react": "^18.2.31",
       "@types/react-dom": "^18.2.14",
+      "@types/react-helmet": "^6.1.8",
       "axios": "^1.5.1",
       "classnames": "^2.3.2",
       "cra-envs": "^1.2.8",

template/src/App.tsx → template/src/app/App.tsx

@@ -1,14 +1,12 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import StartPage from "./pages";
+import StartPage from "../pages";
 
-function App() {
+export const App = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<StartPage />} />
       </Routes>
     </BrowserRouter>
   );
-}
-
-export default App;
+};

template/src/app/styles/global.css

@@ -0,0 +1,3 @@
+html {
+  font-family: Arial, sans-serif;
+}

template/src/core/head/CoreHead.tsx

@@ -5,10 +5,7 @@ export const CoreHead = () => {
   return (
     <Helmet>
       <title>CRA template</title>
-      <meta
-        property="og:title"
-        content="CRA template"
-      />
+      <meta property="og:title" content="CRA template" />
       <meta name="description" content="" />
       <meta property="og:description" content="" />
     </Helmet>

template/src/index.tsx

@@ -1,9 +1,10 @@
 import "normalize.css";
 
-import "./assets/css/reset.css";
+import "./shared/assets/css/reset.css";
+import "./app/styles/global.css";
 
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import { App } from "./app/App";
 import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(

template/src/shared/api/axiosInstance.ts

@@ -0,0 +1,6 @@
+import axios from "axios";
+import { env } from "../../core/env";
+
+export const axiosInstance = axios.create({
+  baseURL: env.API_URL ?? "",
+});

template/src/assets/css/reset.css → template/src/shared/assets/css/reset.css

@@ -4,10 +4,6 @@
   box-sizing: border-box;
 }
 
-html {
-  font-family: Manrope, sans-serif;
-}
-
 h1,
 h2,
 h3,

template/src/shared/index.ts

@@ -0,0 +1 @@
+export { axiosInstance } from "./api/axiosInstance";