Welcome!
In this post, I am going to write an introduction to MirageJS, a tool that I discovered recently and I think that is very useful when you develop a Frontend application that will use an API to get its data without having the backend fully developed.
Assuming we already have a working frontend project in which we want to use Mirage, we have to follow the next steps:
1. Install Mirage in our project:
# Using npm
npm install --save-dev miragejs
# Using Yarn
yarn add --dev miragejs
2. Create a mirage
folder
Now we need to create a folder called mirage
. I located it at lib
folder with the next structure:
3. Inside index.js
Inside index.js
we have to create a mirage server which will serve to generate our fake api:
import { Server } from 'miragejs'
// Some imports from routes folder. Ex:
// import { mock1Routes } from './routes/mock1Routes'
const createMirageServer = () => {
const server = new Server({
routes () {
this.urlPrefix = process.env.API_BASE_URL
// Examples:
// mock1Routes(this)
// mock2Routes(this)
}
})
return server
}
export default createMirageServer
In urlPrefix
we have to set the API base URL of our development API.
4. Create the mock routes
Now, inside the folder called routes
we have to create those calls to the api that we want to mock.
For example we create a routes/mock1Routes.ts
file with the next content:
import { Server, Response } from 'miragejs'
const mock1Routes = (server: Server) => {
server.get('/api/whatever/', (_, request) => {
if (successCondition) {
return new Response(200, {}, {})
} else {
return new Response(404, {}, {})
}
})
}
export default mock1Routes
We can customize responses according to what we need.
NOTE:
In this example we are mocking a GET
method with server.get
, but we can mock any method: server.post
, server.patch
...
5. Configure our Next.js app to use Mirage
To finish, we have to configure our Nextjs app to use this.
I added a .env
variable to switch between use or not use mirage.
USE_MIRAGE_SERVER=true
Then we need to configure the next.config.js
file in order to use our env variables:
if (process.env.NODE_ENV === 'development') {
require('dotenv').config()
}
module.exports = {
env: {
API_BASE_URL: process.env.API_BASE_URL,
USE_MIRAGE_SERVER: process.env.USE_MIRAGE_SERVER
}
}
And now in our _app.tsx
file we have to use this env variable and create the mirage server:
if (process.env.USE_MIRAGE_SERVER === 'true') {
console.log('ATTENTION - Using mirage server')
createMirageServer()
}
And with this would be everything. We already have a functional API mock for our frontend development. 🎉🎉🎉
Top comments (0)