Getting started

Setup

Development Environment

Prerequisites

• IDE: JetBrains Rider or VSCode & Visual Studio Community
• Database: MSSQL (Developer Edition) as default named instance (Basic Setup)
• Database Tools: SSMS (SQL Server Management Studio)
• Containerization: Docker Desktop (or similar for prebuilt containers)
• Message Queue RabbitMQ (Install or use docker-compose in the core submodule docker compose up -d)

Version Control Setup

• Install Git & Git Bash (Checkout as Is - Checkin with Unix Line Breaks)
• Generate SSH Certificate: ssh-keygen (generate as default id_rsa without password) You can run the following command on Git Bash: ssh-keygen -t rsa -f ~/.ssh/id_rsa -N "" Take note of where this is saved.
• Sign up with Bitbucket and GitHub; You should be able to sign in with your Draftworx email on Bitbucket.
• Add the SSH public key you created earlier to both GitHub and Bitbucket (SSH checkout) It should be here: ~/.ssh/id_rsa.pub
• You can test your connection by running the following in your Git Bash: ssh -T git@bitbucket.org

Node.js Environment

• Install NodeJS (Windows Installer)
• Once NodeJS is installed, you can install pnpm by running the following in powershell: npm install -g pnpm@latest-10
• Install Bower: npm install bower -g

Project Setup

Once everything is installed, navigate to the folder you'd like to store your repos in

Main Source Repositories

Run the following to clone the main Cloud repos.

git clone git@bitbucket.org:draftworx/dxcloud.server.git
git clone git@bitbucket.org:draftworx/dxcloud.webui.git
git clone git@bitbucket.org:draftworx/dxcloud.ui.vite.git

Submodules

Once your repos are cloned, you're going to have to initialize and clone the submodules.

cd dxcloud.server
git submodule init
git submodule update

Server Project & Data

• Run the restore base data script. You can use this as an opportunity to set up an alias for powershell on Git Bash.
  1. Navigate to your home directory: cd ~
  2. Create or edit your .bashrc file: nano .bashrc (You can use any text editor)
  3. Add the alias line: alias powershell="powershell.exe"
  4. Save the file and exit the editor.
  5. Reload your bash config: source ~/.bashrc
  6. You can now navigate back to the dxcloud.server repo and run the following: powershell ./scripts/restore-data.ps1
• Open the server project in your IDE, and set all the server projects (DxCloud.Server.*) to startup. You can now run the project.

Web Projects

• Start the Angular project (dxcloud.webui) by navigating to the folder and running the following in the terminal(IDE terminal is easiest): pnpm dev
• Start Vue project (dxcloud.ui.vite) by navigating to the folder and running the following in the terminal(IDE terminal is easiest): pnpm dev
• Login with development account (Ask a team member for creds)

Courses

AWS

Amazon Web Services (AWS) Certified - 4 Certifications!

CSS

CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)

Tailwind

Tailwind CSS from Scratch | Learn By Building Projects

Typescript

Mastering Typescript - 2024 Edition
Understanding Typescript

Vue

Vue 3 - The complete guide
Complete Vue Developer Bootcamp (Pinia, Vitest)

UI Libraries

1. Ag-Grid:

   • A JavaScript datagrid for enterprise.

2. Axios:

   • A promise-based HTTP client for making XMLHttpRequests.

3. Bootstrap 3 for Sass:

   • The Sass version of the popular Bootstrap framework (version 3).

4. Chart.js:

   • A simple yet flexible JavaScript charting library.

5. ESLint:

   • A pluggable linting utility for JavaScript and JSX.

6. FileSaver.js:

   • A library to save files on the client-side.

7. Gulp:

   • A toolkit for automating tasks in the development workflow.

8. Husky:

   • A tool for preventing bad Git commits.

9. Iconify:

   • A set of tools and resources for working with icon sets.

10. Jenesius Vue Modal:

    • A Vue.js modal component.

11. jQuery:

    • A fast and feature-rich JavaScript library.

12. Lint Staged:

    • Run linters on pre-committed files.

13. Lodash:

    • A utility library for working with arrays, numbers, objects, strings, etc.

14. Moment.js:

    • A library for parsing, validating, manipulating, and formatting dates.

15. Oidc Client TS:

    • A TypeScript library for OpenID Connect (OIDC) and OAuth 2.0.

16. Pinia:

    • A state management library for Vue.js.

17. Pinia Logger:

    • A logger for the Pinia state management library.

18. Prime Flex:

    • A utility-first CSS framework.

19. Prime Icons:

    • A set of icons for PrimeVue.

20. PrimeVue:

    • A Vue.js UI component library based on PrimeFaces.

21. Prettier:

    • An opinionated code formatter.

22. Quill:

    • A modern WYSIWYG editor for the web.

23. Sass:

    • A popular CSS preprocessor.

24. Sweet Alert 2:

    • A beautiful, responsive, customizable, and accessible replacement for JavaScript's popup boxes.

25. Tailwind:

    • A utility-first CSS framework for rapidly building custom designs.

26. TypeScript:

    • A superset of JavaScript that adds static types.

27. Vue I18n:

    • Internationalization plugin for Vue.js.

28. Vue I18n Extract:

    • A tool to extract i18n messages from Vue components.

29. Vuelidate:

    • A Vue.js validation library.

30. Vue Plugin Load Script:

    • A Vue.js plugin for dynamically loading scripts.

31. Vue Router:

    • The official router for Vue.js.

32. VueUse:

    • A collection of essential Vue Composition API functions.

33. Vite:

    • Next Generation Frontend Tooling

34. Vite Test:

    • Next Generation Testing Framework

35. Rollup:

    • The JavaScript module bundler

Resources

Complex vue 3 state management Pinia
RealWorld example apps
Dynamic Components with Vue
Migrating from promises to async await
How To Add Loading Indicators to a Vue.js Application