React native template

cli.js

@@ -6,6 +6,7 @@ import chalk from "chalk";
 import useGradient from "./src/utils/useGradient.js";
 import { createBackendProject } from "./src/utils/create-backend-project.js";
 import {
+  promptAppFramework,
   promptBackendFramework,
   promptDatabase,
   promptFrontendFramework,
@@ -18,6 +19,7 @@ import {
 import { createFrontendProject } from "./src/utils/create-frontend-project.js";
 import { validateProjectName } from "./src/utils/helper.js";
 import { sendQueuedStats } from "./src/utils/stat.js";
+import { createAppProject } from "./src/utils/create-app-project.js";
 
 const toolName = "StartEase";
 const jsBackendStacks = ["expressjs", "nestjs"];
@@ -83,6 +85,12 @@ async function startProject() {
     }
 
     await createBackendProject(projectName, framework, database, orm);
+  } else if (projectStack === "app") {
+    framework = await promptAppFramework();
+
+    if (framework === "react-native") {
+      return await createAppProject(projectName, framework);
+    }
   }
 }
 

src/utils/create-app-project.js

@@ -0,0 +1,66 @@
+import { copyFile, getTemplateDir, handleAppConfigs } from "./file-manager.js";
+import path from "path";
+import ora from "ora";
+import { isConnectedToInternet } from "./helper.js";
+import { axiosInstance } from "./axios.js";
+import { CLI_CONSTANTS } from "./constant.js";
+
+/**
+ * loader
+ */
+let stages = [{ message: "Creating Project ...", duration: 2000 }];
+
+async function startSpinner() {
+    for (const stage of stages) {
+        const spinner = ora(stage.message).start();
+        await new Promise((resolve) => setTimeout(resolve, stage.duration));
+        spinner.succeed(stage.message.replace("...", " completed."));
+    }
+
+    stages = [{ message: "Creating App Project ...", duration: 2000 }];
+}
+
+/**
+ * function to create frontend projects
+ * @param {string} framework
+ * @param {string} projectName
+ */
+
+export async function createAppProject(projectName, framework) {
+    try {
+        const destinationPath = path.join(
+            process.cwd(),
+            projectName ?? `project-starter-${framework}-template`,
+        );
+
+        if (framework === "react-native") {
+
+            copyFile(
+                getTemplateDir(`app/react-native`),
+                destinationPath,
+            );
+
+            // success message
+            stages.push({
+                message: `App - React-Native project created successfully! : ${destinationPath}`,
+                duration: 1000,
+            });
+
+            await startSpinner();
+        }
+
+        await handleAppConfigs(destinationPath, projectName);
+
+        // update stat
+
+        // if (await isConnectedToInternet()) {
+        //     await axiosInstance(CLI_CONSTANTS.statBaseUrl).post("/stat", {
+        //         app: "startease",
+        //         framework,
+        //     });
+        // }
+
+    } catch (e) {
+        console.log(`Error Creating Frontend Project: ${e}`);
+    }
+}

src/utils/file-manager.js

@@ -144,3 +144,36 @@ export function createFolder(path) {
 export const getTemplateDir = (filePath) => {
   return path.join(__dirname, "..", "../templates", filePath);
 };
+
+export const handleAppConfigs = async (path, projectName) => {
+
+  if (projectName.includes(" ")) {
+    projectName = projectName.split(" ").join("-");
+  }
+  //app.json
+  // const path = "./templates/app/react-native";
+  const pathToAppJson = path + "/app.json"
+  let appJson = await fs.readJson(pathToAppJson);
+  appJson.expo.name = projectName;
+  appJson.expo.slug = projectName;
+
+  //package.lock.json
+  const pathToPackageLock = path + "/package-lock.json"
+  let PackageLock = await fs.readJson(pathToPackageLock);
+  PackageLock.name = projectName;
+  PackageLock.packages[""].name = projectName;
+
+  //package.json
+  const pathToPackage = path + "/package.json"
+  let Package = await fs.readJson(pathToPackage);
+  Package.name = projectName;
+
+  //save the edited config
+  saveAppConfig(pathToAppJson, appJson);
+  saveAppConfig(pathToPackage, Package);
+  saveAppConfig(pathToPackageLock, PackageLock);
+}
+
+const saveAppConfig = (path, config) => {
+  fs.writeFile(path, JSON.stringify(config, null, 4));
+}

src/utils/prompts.js

@@ -18,7 +18,7 @@ export async function promptProjectStack() {
       type: "list",
       name: "projectStack",
       message: "Choose your stack:",
-      choices: ["Frontend", "Backend"],
+      choices: ["Frontend", "Backend", "App"],
     },
   ]);
 
@@ -128,3 +128,16 @@ export async function promptDependenciesInstall() {
 
   return result.installDependencies;
 }
+
+export async function promptAppFramework() {
+  const ans = await inquirer.prompt([
+    {
+      type: "list",
+      name: "framework",
+      message: "Choose an app framework:",
+      choices: ["React-Native"],
+    },
+  ]);
+
+  return ans.framework.toLowerCase();
+}

templates/app/react-native/App.js

@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  console.log("Project generated with startease - @ https://startease.vercel.app");
+  return (
+    <View style={styles.container}>
+      <Text>Welcome to the new project created with startease</Text>
+      <Text>Open up App.js to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

templates/app/react-native/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "AwesomeProject",
+    "slug": "AwesomeProject",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

templates/app/react-native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};