**Course Title:** Building Cross-Platform Mobile Applications with Ionic **Section Title:** Introduction to Ionic Framework **Topic:** Setting up the development environment (Node.js, Ionic CLI, Angular/React/Vue) In this topic, we'll cover the steps necessary to set up a development environment for building cross-platform mobile applications with Ionic. This will include installing Node.js, Ionic CLI, and a frontend framework of your choice (Angular, React, or Vue). **Installing Node.js** Before we can start building our Ionic application, we need to install Node.js. Node.js is a JavaScript runtime that allows us to run JavaScript on the server-side. To download and install Node.js, navigate to the [Node.js download page](https://nodejs.org/en/download/) and follow the instructions for your operating system. Once installed, open a terminal or command prompt and run the following command to verify that Node.js is installed: ``` node -v ``` This should print the version of Node.js that is currently installed. **Installing Ionic CLI** With Node.js installed, we can now install the Ionic CLI. The Ionic CLI is a command-line interface that allows us to create, build, and run Ionic applications. To install the Ionic CLI, run the following command in your terminal or command prompt: ```bash npm install -g @ionic/cli ``` This command tells npm (the package manager for Node.js) to install the Ionic CLI globally, meaning that it will be available system-wide. **Installing a Frontend Framework** Ionic applications are built on top of a frontend framework. In this course, we'll be using Angular, React, or Vue as our frontend framework. #### Option 1: Angular To install Angular, run the following command in your terminal or command prompt: ```bash npm install -g @angular/cli ``` This command tells npm to install the Angular CLI globally. #### Option 2: React To install React, run the following command in your terminal or command prompt: ```bash npm install -g create-react-app ``` This command tells npm to install the create-react-app CLI globally. #### Option 3: Vue To install Vue, run the following command in your terminal or command prompt: ```bash npm install -g @vue/cli ``` This command tells npm to install the Vue CLI globally. **Verifying the Ionic CLI and Frontend Framework** Now that we have installed the Ionic CLI and a frontend framework, let's verify that everything is working correctly. Run the following command to verify that the Ionic CLI is installed: ```bash ionic --version ``` This should print the version of the Ionic CLI that is currently installed. Next, let's verify that our frontend framework is installed. Run the following command, depending on which framework you chose to install: * Angular: `ng --version` * React: `create-react-app --version` * Vue: `vue --version` **Creating a New Ionic Project** Now that we have our development environment set up, let's create a new Ionic project. Run the following command, depending on which frontend framework you chose to install: * Angular: `ionic start myApp angular` * React: `ionic start myApp react` * Vue: `ionic start myApp vue` This command tells the Ionic CLI to create a new Ionic project in a directory called `myApp`, using the specified frontend framework. **Navigating to the Project Directory** Once the project has been created, navigate to the project directory by running the following command: ```bash cd myApp ``` This command tells the terminal or command prompt to navigate to the `myApp` directory. **Running the Application** Finally, let's run the application to verify that everything is working correctly. Run the following command to start the application: ```bash ionic serve ``` This command tells the Ionic CLI to start the application in the development environment. Open a web browser and navigate to `http://localhost:8100/` to see the running application. **Conclusion** In this topic, we covered the steps necessary to set up a development environment for building cross-platform mobile applications with Ionic. We installed Node.js, Ionic CLI, and a frontend framework, and created a new Ionic project. We also verified that the Ionic CLI and frontend framework were installed correctly, and ran the application to verify that everything was working correctly. **What's Next** In the next topic, we'll cover **Understanding Ionic's architecture and design principles**. **Do you have any questions or need help?** Leave a comment below or email us at [support@example.com](mailto:support@example.com).