Skip to content

README.md

Latest commit

 

History

History
62 lines (41 loc) · 3.1 KB

README.md

File metadata and controls

62 lines (41 loc) · 3.1 KB

Angular 1.5+ ES6 & Component API Example App

Vercel Deploy

Vercel Status

Example Angular 1.5+ (ES6 + Components) codebase that adheres to the RealWorld spec and API.

This project started as a fork of gothinkster/angularjs-realworld-example-app and has been incrementally migrated to React (page by page) while keeping AngularJS as the shell/router.

Links:

Getting started

  1. Clone repo
  2. npm install
  3. npm run dev

Migration status

  • AngularJS is still responsible for the shell/router (header, footer, and routing).
  • Pages are being migrated to React one by one. See docs/MIGRATION_REACT.md for details.
  • The Settings page has already been migrated to React:

Screenshot of the Settings page after it was migrated to React, rendered inside the AngularJS shell

Additional changes in this fork (high level):

  • Build system migrated from Gulp/Browserify to Vite.
  • AngularJS DI safety strengthened with explicit $inject annotations and ngInject usage.
  • Template caching is generated at build time via scripts/generate-templates.js.
  • Mixed AngularJS + React setup with React pages mounted inside the Angular shell.

Making requests to the backend API

For convenience, we have a live API server running at api.realworld.show/api for the application to make requests against. You can view the API spec here which contains all routes & responses for the server.

The source code for the backend server (available for Node, Rails and Django) can be found in the main RealWorld repo.

If you want to change the API URL to a local server, set VITE_API_URL (see .env.example) or edit src/config/app.constants.js and change api to the local server's URL (i.e. http://localhost:3000/api).

Build system

  • The app uses Vite for development and production builds.
  • AngularJS templates are generated into src/config/app.templates.js via scripts/generate-templates.js on npm run dev and npm run build.

Deploy to Vercel

  1. Push this repo to GitHub.
  2. Create a new project in Vercel and import the repo.
  3. Set environment variable VITE_API_URL to your API base URL (example: https://api.realworld.show/api).
  4. Deploy.

Build settings:

  1. Framework preset: Vite
  2. Build command: npm run build
  3. Output directory: dist

Brought to you by Thinkster