[#88] Change Webpack to Vite

.gitignore

@@ -13,3 +13,4 @@ npm-debug.log*
 
 # editors
 .vscode
+.idea

packages/cli-tool/README.md

@@ -91,11 +91,24 @@ To run the CLI on your local machine:
 
 > 💡 Running just `./bin/dev` without argument will display all the possible commands as well as additional information.
 
-If your changes also impacted the `cra-template` package, you can still test them locally using:
-
-```BASH
-  ./bin/dev generate test-cli file:../cra-template
-```
+To test with local changes in either the `./packages/cra-template` or the `./vite-temaplte/` folders, use the following commands:
+- For Vite:
+  ```BASH
+    # Assuming the repository `react-temapltes` is in `~/Documents/Source/`.
+    # The generated app will be in `~/Documents/Source/vite-app`
+    ./bin/dev generate vite-app ~/Documents/Source/ feature/gh88-replace-webpack-with-vite
+  ```
+- For Create React App (Webpack):
+  ```BASH
+    # Assuming the repository `react-temapltes` is in `~/Documents/Source/`.
+    # The generated app will be in `~/Documents/Source/webpack-app`
+    ./bin/dev generate webpack-app ~/Documents/Source/ file:react-templates/packages/cra-template
+  ```
+
+The last argument is named `templateReference` and is either the branch name (for Vite) or the local repository path (for CRA), relative to the previous argument.
+The second argument (`~/Documents/Source`) enables to deploy the app in another directory rather than the current repository.
+
+> Errors might occur if you try to generate a project within this repository.
 
 Find more the [OCLIF Documentation](https://oclif.io/docs/introduction.html)!
 
@@ -123,8 +136,11 @@ It is free software and may be redistributed under the terms specified in the [L
 
 This project is maintained and funded by [Nimble](https://nimblehq.co).
 
-We love open source and do our part in sharing our work with the community!
+We ❤️ open source and do our part in sharing our work with the community!
 See [our other projects][community] or [hire our team][hire] to help build your product.
 
+Want to join? [Check out our jobs][jobs]!
+
 [community]: https://github.com/nimblehq
 [hire]: https://nimblehq.co/
+[jobs]: https://jobs.nimblehq.co/

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/index.ts

@@ -1,5 +1,6 @@
 import { CliUx } from '@oclif/core';
 
+import { templateOptions } from '../../template/index';
 import setupBootstrap from './bootstrap';
 import setupTailwindCss from './tailwind-css';
 
@@ -14,13 +15,14 @@ export const UI_FRAMEWORK_OPTIONS = new Map<uiFrameworkKey, string>([
 export const setUIFramework = async(
   appPath: string,
   uiFramework: uiFrameworkKey,
+  selectedTemplate: templateOptions,
 ): Promise<void> => {
   switch (uiFramework) {
     case 'bootstrap':
       CliUx.ux.info('Configure Bootstrap...');
       return setupBootstrap(appPath);
     case 'tailwindCss':
       CliUx.ux.info('Configure TailwindCSS...');
-      return setupTailwindCss(appPath);
+      return setupTailwindCss(appPath, selectedTemplate);
   }
 };

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

@@ -4,18 +4,20 @@ import { CliUx } from '@oclif/core';
 
 import runCommand from '../../helpers/child-process';
 import { replaceLine } from '../../helpers/file-editor';
+import { templateOptions } from '../../template/index';
 
 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 +26,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 +47,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) {
@@ -68,20 +70,29 @@ const addTailwindFileStructure = (appPath: string): Promise<void> => {
   });
 };
 
-const addTailwindCssImport = (appPath: string): Promise<void> => {
+const addTailwindCssImport = (appPath: string, selectedTemplate: templateOptions): Promise<void> => {
   return new Promise((resolve, reject) => {
     CliUx.ux.info('Update css imports in App.tsx');
 
     try {
-      const indexScssPath = `./${appPath}/src/App.tsx`;
-
-      replaceLine(
-        indexScssPath,
-        `import 'assets/stylesheets/application.scss';`,
-        `import 'assets/stylesheets/application.css';`,
-      );
-      replaceLine(indexScssPath, `import 'dummy.scss';`, `import 'dummy.css';`);
-
+      const indexScssPath = `${appPath}/src/App.tsx`;
+
+      if (selectedTemplate === 'webpack') {
+        replaceLine(
+          indexScssPath,
+          `import 'assets/stylesheets/application.scss';`,
+          `import 'assets/stylesheets/application.css';`,
+        );
+        replaceLine(indexScssPath, `import '@/dummy.scss';`, `import '@/dummy.css';`);
+      }
+      if (selectedTemplate === 'vite') {
+        replaceLine(
+          indexScssPath,
+          `import '@/assets/stylesheets/application.scss';`,
+          `import '@/assets/stylesheets/application.css';`,
+        );
+        replaceLine(indexScssPath, `import 'dummy.scss';`, `import 'dummy.css';`);
+      }
       resolve();
     } catch (error) {
       CliUx.ux.info(
@@ -94,11 +105,11 @@ const addTailwindCssImport = (appPath: string): Promise<void> => {
   });
 };
 
-const setupTailwindCss = async function(appPath: string): Promise<void> {
+const setupTailwindCss = async function(appPath: string, selectedTemplate: templateOptions): Promise<void> {
   return installDevDependencies(appPath)
     .then((_value) => removeScssFileStructure(appPath))
     .then((_value) => addTailwindFileStructure(appPath))
-    .then((_value) => addTailwindCssImport(appPath));
+    .then((_value) => addTailwindCssImport(appPath, selectedTemplate));
 };
 
 export default setupTailwindCss;

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

@@ -6,7 +6,9 @@ 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 initializeCraApp from '../../template/initialize-cra-app';
+import { initializeTemplate } from '../../template/index';
+
+type generateArguments = { appName: string; templateReference: string; dest: string };
 
 export default class Generate extends Command {
   static description = 'Generate Nimble React application';
@@ -20,44 +22,55 @@ export default class Generate extends Command {
       description: 'application name',
     },
     {
-      name: 'template',
+      name: 'dest',
       required: false,
       description:
-        'template location, use "file:{../path/to/your/local/template/repo}" for using a local cra template',
-      default: '@nimblehq',
+      'destination, defines in which folder the project folder will be created',
+      default: './',
     },
     {
-      name: 'dest',
+      name: 'templateReference',
       required: false,
-      description:
-        'destination, defines in which folder the project folder will be created',
-      default: './',
+      description: 'Specify the branch to download the vite-template from or path to a local cra-template folder.',
+      default: '',
     },
   ];
 
-  public async run(): Promise<void> {
+  public async parseArgs(): Promise<generateArguments> {
+    let destination = '';
     const {
-      args: { appName, template, dest },
-    } = await this.parse(Generate);
+      args: { appName, templateReference, dest },
+    }: { args: generateArguments } = await this.parse(Generate);
 
-    const appPath = `${dest}${appName}`;
+    destination = dest.endsWith('/') ? dest : `${dest}/`;
 
+    return { appName, templateReference, dest: destination };
+  }
+
+  public async run(): Promise<void> {
+    const args = await this.parseArgs();
     const answers = await Inquirer.prompt(questions);
 
+    const appPath = `${args.dest}${args.appName}`;
+
     try {
       this.log(
-        `Generating Nimble React app with the project name: ${appName}!`,
+        `Generating Nimble React app with the project name: ${args.appName}!`,
       );
 
-      await initializeCraApp(appName, template, dest);
+      await initializeTemplate({
+        templateOption: answers.template,
+        ...args,
+      });
+
       setVersionControl(appPath, answers.versionControl);
-      await setUIFramework(appPath, answers.uiFramework);
+      await setUIFramework(appPath, answers.uiFramework, answers.template);
 
       // Clean files after all steps
       await this.cleanFiles(appPath);
 
       // Display a final message
-      this.displayEndMessage(appName, appPath);
+      this.displayEndMessage(args.appName, appPath);
     } catch (error) {
       this.error(error as string | Error);
     }

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

@@ -0,0 +1,25 @@
+import runCommand from './child-process';
+
+type gitHubRepository = {
+  gitHubAccount: string;
+  repositoryName: string;
+  branch: string;
+};
+
+const downloadRepository = (
+  repository: gitHubRepository,
+  ouput: string,
+  dest: string,
+): Promise<void> => {
+  return runCommand(
+    'curl',
+    [
+      `https://codeload.github.com/${repository.gitHubAccount}/${repository.repositoryName}/tar.gz/${repository.branch}`,
+      '--output',
+      `${ouput}.gz`,
+    ],
+    dest,
+  );
+};
+
+export { downloadRepository, gitHubRepository };

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,
+  templateReference,
+  dest,
+}: {
+  appName: string;
+  templateOption: templateOptions;
+  templateReference: string;
+  dest: string;
+}): Promise<void> => {
+  if (templateOption === 'vite') {
+    await initializeViteApp({
+      appName,
+      dest,
+      branch: templateReference,
+    });
+
+    return;
+  }
+
+  await initializeCraApp(appName, templateReference, dest);
+};

packages/cli-tool/src/template/initialize-cra-app.ts

@@ -1,10 +1,16 @@
 import runCommand from '../helpers/child-process';
 
+const DEFAULT_CRA_TEMPLATE = '@nimblehq';
+
 const initializeCraApp = async(
   appName: string,
   template: string,
   dest: string,
 ): Promise<void> => {
+  if (template === '') {
+    template = DEFAULT_CRA_TEMPLATE;
+  }
+
   return runCommand('npx', [
     'create-react-app',
     `${appName}`,