StarterStack

Appearance

Axios ​

StarterStack uses the Axios library to handle all HTTP requests.

Overview ​

All Axios configuration and setup is handled in /frontend/axios/index.js following the standard Axios docs.

A Few Behviors ​

StarterStack configures Axios to intercept all HTTP requests and do the following:

  • start the NProgress progress bar to indicate a request is loading

StarterStack configures Axios to intercept all HTTP responses and do the following:

  • stop the NProgress progress bar to indicate a request is complete and a repsonse has been received.
  • examine the HTTP repsonse code. If a HTTP 401 Unauthorized is received, the application redirects to the login route

API Handlers ​

There are 3 API handlers bundled in with StarterStack to connect to the /backend:

  1. Auth - handles all authentication related services
  2. User - handles all user related services
  3. Stripe - handles all Stripe related services

Adding a New API Handler ​

As you built out your application, you will no doubt have to add more api routes to the backend or to 3rd parties.

The process consists of 2 steps:

1. Create an API handler file ​

Review /frontend/axios/auth.js for an example of how to create an API handler.

2. Confgure Axios to Use Your API Handler ​

Add your API handler to the Axios configuration in /frontend/axios/index.js

Locate the other API handlers at the top of the index.js

js
import auth from '@/axios/auth.js'
import user from '@/axios/user.js'
import stripe from '@/axios/stripe.js'
import myAPIHander from '@axios/my-api-handler.js' // <-- add yours here

Next, locate the section that adds the handler to axios:

js
/**
 * extend instance with our api endpoints
 */
_axios.api = {
  Auth: auth(_axios),
  User: user(_axios),
  Stripe: stripe(_axios),
  MyAPIHander: myAPIHander(_axios) // <-- add yours here
}

Using your API in Code ​

js
const response = await axios.api.MyAPIHander.someFunc(data)