[#88] Refactor to ask for Vite or Webpack

packages/cli-tool/src/add-ons/ui-framework/bootstrap.ts

@@ -12,11 +12,11 @@ const DEV_DEPENDENCIES = ['bootstrap@^5.1.3'];
 
 export const addBootstrapFileStructure = (appPath: string): Promise<void> => {
   return new Promise((resolve, reject) => {
-    CliUx.ux.info('Starting: ', `./${appPath}/.add-ons/bootstrap`);
+    CliUx.ux.info('Starting: ', `${appPath}/.add-ons/bootstrap`);
 
     try {
-      const destPath = `./${appPath}/src/assets/stylesheets/vendor/bootstrap/`;
-      fs.renameSync(`./${appPath}/.add-ons/bootstrap/`, destPath);
+      const destPath = `${appPath}/src/assets/stylesheets/vendor/bootstrap/`;
+      fs.renameSync(`${appPath}/.add-ons/bootstrap/`, destPath);
 
       resolve();
     } catch (error) {
@@ -42,7 +42,7 @@ const addBootstrapScssUseLine = (appPath: string): Promise<void> => {
     CliUx.ux.info('Insert bootstrap scss import.');
 
     try {
-      const indexScssPath = `./${appPath}/src/assets/stylesheets/application.scss`;
+      const indexScssPath = `${appPath}/src/assets/stylesheets/application.scss`;
       const lineToAdd = `@use 'src/assets/stylesheets/vendor/bootstrap';`;
 
       addLinesToFileAfterMatchedLine(
@@ -64,7 +64,7 @@ const addBootstrapScssUseLine = (appPath: string): Promise<void> => {
 };
 
 const installDevDependencies = (appPath: string): Promise<void> => {
-  return runCommand('npm', ['install', ...DEV_DEPENDENCIES], `./${appPath}/`);
+  return runCommand('npm', ['install', ...DEV_DEPENDENCIES], `${appPath}/`);
 };
 
 const setupBootstrap = async(appPath: string): Promise<void> => {

packages/cli-tool/src/add-ons/ui-framework/tailwind-css.ts

@@ -9,13 +9,14 @@ const DEV_DEPENDENCIES = [
   'tailwindcss@^3.1.4',
   'postcss@^8.4.14',
   'postcss-import@^14.1.0',
+  'autoprefixer@^10.4.7',
 ];
 
 const installDevDependencies = (appPath: string): Promise<void> => {
   return runCommand(
     'npm',
     ['install', '-D', ...DEV_DEPENDENCIES],
-    `./${appPath}/`,
+    `${appPath}/`,
   );
 };
 
@@ -24,8 +25,8 @@ const removeScssFileStructure = (appPath: string): Promise<void> => {
     CliUx.ux.info('Remove SCSS files...');
 
     try {
-      fs.rmSync(`./${appPath}/src/assets/stylesheets`, { recursive: true });
-      fs.rmSync(`./${appPath}/src/dummy.scss`);
+      fs.rmSync(`${appPath}/src/assets/stylesheets`, { recursive: true });
+      fs.rmSync(`${appPath}/src/dummy.scss`);
 
       resolve();
     } catch (error) {
@@ -45,19 +46,19 @@ const addTailwindFileStructure = (appPath: string): Promise<void> => {
     CliUx.ux.info('Add TailwindCSS files...');
 
     try {
-      const applicationCss = `./${appPath}/.add-ons/tailwind/stylesheets/application.css`;
-      const dummyCss = `./${appPath}/.add-ons/tailwind/stylesheets/dummy.css`;
-      const tailwindConfig = `./${appPath}/.add-ons/tailwind/tailwind.config.js`;
-      const postcssConfig = `./${appPath}/.add-ons/tailwind/postcss.config.js`;
+      const applicationCss = `${appPath}/.add-ons/tailwind/stylesheets/application.css`;
+      const dummyCss = `${appPath}/.add-ons/tailwind/stylesheets/dummy.css`;
+      const tailwindConfig = `${appPath}/.add-ons/tailwind/tailwind.config.js`;
+      const postcssConfig = `${appPath}/.add-ons/tailwind/postcss.config.js`;
 
-      fs.mkdirSync(`./${appPath}/src/assets/stylesheets/`);
+      fs.mkdirSync(`${appPath}/src/assets/stylesheets/`);
       fs.renameSync(
         applicationCss,
-        `./${appPath}/src/assets/stylesheets/application.css`,
+        `${appPath}/src/assets/stylesheets/application.css`,
       );
-      fs.renameSync(dummyCss, `./${appPath}/src/dummy.css`);
-      fs.renameSync(tailwindConfig, `./${appPath}/tailwind.config.js`);
-      fs.renameSync(postcssConfig, `./${appPath}/postcss.config.js`);
+      fs.renameSync(dummyCss, `${appPath}/src/dummy.css`);
+      fs.renameSync(tailwindConfig, `${appPath}/tailwind.config.js`);
+      fs.renameSync(postcssConfig, `${appPath}/postcss.config.js`);
 
       resolve();
     } catch (error) {
@@ -73,13 +74,22 @@ const addTailwindCssImport = (appPath: string): Promise<void> => {
     CliUx.ux.info('Update css imports in App.tsx');
 
     try {
-      const indexScssPath = `./${appPath}/src/App.tsx`;
+      const indexScssPath = `${appPath}/src/App.tsx`;
 
+      // When using Webpack
       replaceLine(
         indexScssPath,
         `import 'assets/stylesheets/application.scss';`,
         `import 'assets/stylesheets/application.css';`,
       );
+      replaceLine(indexScssPath, `import '@/dummy.scss';`, `import '@/dummy.css';`);
+
+      // When using Vite
+      replaceLine(
+        indexScssPath,
+        `import '@/assets/stylesheets/application.scss';`,
+        `import '@/assets/stylesheets/application.css';`,
+      );
       replaceLine(indexScssPath, `import 'dummy.scss';`, `import 'dummy.css';`);
 
       resolve();

packages/cli-tool/src/commands/generate/index.ts

@@ -6,7 +6,7 @@ import Inquirer from "inquirer";
 import { setUIFramework } from "../../add-ons/ui-framework/index";
 import { setVersionControl } from "../../add-ons/version-control/index";
 import { questions } from "../../helpers/questions";
-import initializeViteApp from "../../template/initialize-vite-app";
+import { initializeTemplate } from "../../template/index";
 
 export default class Generate extends Command {
   static description = "Generate Nimble React application";
@@ -22,8 +22,7 @@ export default class Generate extends Command {
     {
       name: "branch",
       required: false,
-      description:
-        'Specify the branch to download the vite-template from...',
+      description: "Specify the branch to download the vite-template from...",
       default: "main",
     },
     {
@@ -38,9 +37,10 @@ export default class Generate extends Command {
   public async run(): Promise<void> {
     let {
       args: { appName, branch, dest },
-    }: {args:{appName:string, branch:string, dest:string}} = await this.parse(Generate);
+    }: { args: { appName: string; branch: string; dest: string } } =
+      await this.parse(Generate);
 
-    if(!dest.endsWith('/')) {
+    if (!dest.endsWith("/")) {
       dest = `${dest}/`;
     }
 
@@ -53,11 +53,13 @@ export default class Generate extends Command {
         `Generating Nimble React app with the project name: ${appName}!`
       );
 
-      await initializeViteApp({
+      await initializeTemplate({
+        templateOption: answers.template,
         appName,
+        branch,
         dest,
-        branch: branch,
       });
+
       setVersionControl(appPath, answers.versionControl);
       await setUIFramework(appPath, answers.uiFramework);
 

packages/cli-tool/src/helpers/questions.ts

@@ -1,11 +1,19 @@
 import { UI_FRAMEWORK_OPTIONS } from '../add-ons/ui-framework/index';
 import { VERSION_CONTROL_OPTIONS } from '../add-ons/version-control/index';
+import { TEMPLATE_OPTIONS } from '../template/index';
 import getChoices from './choices';
 
 const uiFrameworkChoices = getChoices(UI_FRAMEWORK_OPTIONS);
 const versionControlChoices = getChoices(VERSION_CONTROL_OPTIONS);
+const templateOptions = getChoices(TEMPLATE_OPTIONS);
 
 export const questions = [
+  {
+    type: 'list',
+    name: 'template',
+    message: 'Select a template:',
+    choices: templateOptions,
+  },
   {
     type: 'list',
     name: 'versionControl',

packages/cli-tool/src/template/index.ts

@@ -0,0 +1,32 @@
+import initializeCraApp from "./initialize-cra-app";
+import initializeViteApp from "./initialize-vite-app";
+
+export type templateOptions = "webpack" | "vite";
+export const TEMPLATE_OPTIONS = new Map<templateOptions, string>([
+  ["webpack", "WebPack"],
+  ["vite", "Vite"],
+]);
+
+export const initializeTemplate = async ({
+  appName,
+  templateOption,
+  branch,
+  dest,
+}: {
+  appName: string;
+  templateOption: templateOptions;
+  branch: string;
+  dest: string;
+}): Promise<void> => {
+  if (templateOption == "vite") {
+    await initializeViteApp({
+      appName,
+      dest,
+      branch: branch,
+    });
+
+    return;
+  }
+
+  await initializeCraApp(appName, branch, dest);
+};