Getting Started with SPA Frameworks

Here is how you can initiate your project with different SPA frameworks. Please note that the SPA frameworks mentioned in this tutorial require Node.js and npm available in your system. So make sure you have Node.js and npm installed on your machine. Let's imagine you're creating a Weather Forecast application.

Setting up a project with Angular

If you selected Angular, first you need to install Angular CLI with the command:

npm install -g @angular/cli

After successful installation, you can now create your angular application using the command:

ng new my-weather-app

To start your project, move to your project directory and execute the command:

ng serve

You'll have the below file and folder structure after a successful project setup.

- src/
  - app/
    - app.component.ts
  - assets/
  - environments/
  - styles.css
  - index.html
- node_modules/
- angular.json
- tsconfig.json
- package.json
- tslint.json (if used)

Here is a simple "Hello World" example in Angular:

// Angular Hello World Component
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: '<div>Hello, World!</div>',
})
export class HelloWorldComponent {}

Setting up a project with React

If you're using React, just type the below command to create your project:

npx create-react-app my-weather-app

To start your project, move to your project directory and execute the command:

npm start

You'll have the below file and folder structure after a successful project setup.

- node_modules/
- public/
- src/
  - index.js
  - App.js
  - components/
  - assets/
- package.json
- babel.config.js (if used)
- webpack.config.js (if ejected from Create React App)

Here is a simple "Hello World" example in React:

// React Hello World Component
import React from 'react';

function HelloWorld() {
  return <div>Hello, World!</div>;
}

export default HelloWorld;

Setting up a project with Vue

In the case of Vue, you need to install the Vue CLI using the command:

npm install -g @vue/cli

Now create your project using:

vue create my-weather-app

To start your project, move to your project directory and execute the command:

npm run serve

You'll have the below file and folder structure after a successful project setup.

- node_modules/
- public/
- src/
  - main.js
  - App.vue
  - components/
  - assets/
  - router/ (if using Vue Router)
  - store/ (if using Vuex)
  - views/
- package.json
- vue.config.js (if needed)

Here is a simple "Hello World" example in Vue:

<!-- Vue.js Hello World Component -->
<template>
  <div>Hello, World! (Vue.js)</div>
</template>