How to retrieve a list of routes using axios in a Vue project set up with Webpack

Question

How to retrieve a list of routes using axios in a Vue project set up with Webpack

I have implemented the prerender-spa-plugin in my Vue Webpack Cli project following the documentation by registering the Plugin in webpack.prod.conf.js as shown below:

...
plugins: [
  ...
  new PrerenderSpaPlugin(
    path.join(__dirname, '../dist'),
    ['/', '/about', '/contact'],
    {
      captureAfterTime: 5000
    }
  )
]

Now, I am exploring the possibility of retrieving the list of routes array via an axios call. However, my attempts so far have been unsuccessful as illustrated in the code snippet below:

var routes = axios.get('http://myapi.com/api').then(function (response) {
  return response.map(function (response) {
    return '/base/' + response.slug
  })
})

plugins: [
  ...
  new PrerenderSpaPlugin(
    path.join(__dirname, '../dist'),
    routes,
    {
      captureAfterTime: 5000
    }
  )
]

Due to my limited Javascript knowledge, I am struggling to resolve this issue. Any guidance or insights on how to achieve this would be greatly appreciated.

Best regards

javascript webpack vue.js config prerender

Answer 1

Answer №1

At the moment, this solution may not function properly due to Webpack's default assumption of synchronous configuration. A workaround is to utilize Webpack's ability to handle asynchronous configuration by returning a promise that resolves after your route request.

If you have access to an environment that supports async/await (node 8+), all you need to do is export an async function. Alternatively, return a new Promise:

// webpack.conf.js
module.exports = async function () {
  const response = await axios.get('http://myapi.com/api')
  const routes = response.map((response) => {
    return '/base/' + response.slug
  })

  return {
    plugins: [
      // ...
      new PrerenderSpaPlugin(
        path.join(__dirname, '../dist'),
        routes,
        {
          captureAfterTime: 5000
        }
      )
    ]
  }
}

If these options are not feasible, another approach is to create a separate task to make the request, save it to a json file, and then use require('./route-response.json') in your configuration.

Answer 2

At the moment, this solution may not function properly due to Webpack's default assumption of synchronous configuration. A workaround is to utilize Webpack's ability to handle asynchronous configuration by returning a promise that resolves after your route request.

If you have access to an environment that supports async/await (node 8+), all you need to do is export an async function. Alternatively, return a new Promise:

// webpack.conf.js
module.exports = async function () {
  const response = await axios.get('http://myapi.com/api')
  const routes = response.map((response) => {
    return '/base/' + response.slug
  })

  return {
    plugins: [
      // ...
      new PrerenderSpaPlugin(
        path.join(__dirname, '../dist'),
        routes,
        {
          captureAfterTime: 5000
        }
      )
    ]
  }
}

If these options are not feasible, another approach is to create a separate task to make the request, save it to a json file, and then use require('./route-response.json') in your configuration.

Answer 3

Answer №2

Having a similar need, I set out to extract the list of routes from my API by creating a specialized script called prebuild.js

const fs = require('fs')
const axios = require('axios')

// Requesting data from the API
axios.get('http://myapi.com/api.php')
  .then(function(response) {
    const data = response.data
    try {
      // Saving the route list to a local file
      fs.writeFileSync('./route-response.js', data)
    } catch(err) {
      console.log(err)
    }
  })
  .catch(function(err) {
    console.log(err)
  })

The API sends over the information in the route-response.js file, structured and ready for direct use with npm. You can handle any necessary formatting within Node itself. Here's an example format:

module.exports = {
  theList: [
    '/',
    '/about',
    '/contact',
    '/login',
    '/register'
  ]
}

The aforementioned file is retrieved in webpack.prod.conf.js as follows:

...
const routeList = require('./route-response.js')
...
const webpackConfig = merge(baseWebpackConfig, {
  ...
  plugins: [
    ...
    new PrerenderSPAPlugin({
      staticDir: path.resolve(__dirname, '../dist'),
      routes: routeList.theList,
      renderer: new PuppeteerRenderer()
    })
    ...
  ]
  ...
})

Finally, include the prebuild script in your package.json

prebuild: runs before the build process.
postbuild: runs after the build process.

Here's how you can add it:

...
"scripts": {
  "dev": "node build/dev-server.js",
  "prebuild": "node build/prebuild.js",
  "build": "node build/build.js"
},
"dependencies": {
...

This streamlined setup allows me to simply execute npm run build

Answer 4

Having a similar need, I set out to extract the list of routes from my API by creating a specialized script called prebuild.js

const fs = require('fs')
const axios = require('axios')

// Requesting data from the API
axios.get('http://myapi.com/api.php')
  .then(function(response) {
    const data = response.data
    try {
      // Saving the route list to a local file
      fs.writeFileSync('./route-response.js', data)
    } catch(err) {
      console.log(err)
    }
  })
  .catch(function(err) {
    console.log(err)
  })

The API sends over the information in the route-response.js file, structured and ready for direct use with npm. You can handle any necessary formatting within Node itself. Here's an example format:

module.exports = {
  theList: [
    '/',
    '/about',
    '/contact',
    '/login',
    '/register'
  ]
}

The aforementioned file is retrieved in webpack.prod.conf.js as follows:

...
const routeList = require('./route-response.js')
...
const webpackConfig = merge(baseWebpackConfig, {
  ...
  plugins: [
    ...
    new PrerenderSPAPlugin({
      staticDir: path.resolve(__dirname, '../dist'),
      routes: routeList.theList,
      renderer: new PuppeteerRenderer()
    })
    ...
  ]
  ...
})

Finally, include the prebuild script in your package.json

prebuild: runs before the build process.
postbuild: runs after the build process.

Here's how you can add it:

...
"scripts": {
  "dev": "node build/dev-server.js",
  "prebuild": "node build/prebuild.js",
  "build": "node build/build.js"
},
"dependencies": {
...

This streamlined setup allows me to simply execute npm run build

How to retrieve a list of routes using axios in a Vue project set up with Webpack

Answer №1

Answer №2

Similar questions

How to trigger a dispatch action in Nuxt.js store to update the state

Assigning an identification number to specify the type of Chip

Drag and drop elements within the Vue.Draggable component to rearrange them in the

File or directory does not exist: ENOENT error occurred while trying to scan 'pages'

Exploring the new features of utilizing buttons with the onClick method in the updated nextJS version 14.1.3

No Results Returned by Sails Query Following count() Query

Submit Form Without Reloading -- and successfully submit it

What is the best way to add the current date to a database?

execute numerous Jssor Caption instances simultaneously

Tips for validating form input upon submission in Angular 6

Load Vue dynamically to implement reCAPTCHA script

The function this.props.array.map is not defined

Your search parameter is not formatted correctly

Troubles arise when using $resource without initializing it with the new operator

Utilizing PHP loops with the integration of a Datetimepicker

Mysterious attributes - utilizing react and material-ui

``There Seems to be an Issue with Loading Content in Tabs

JavaScript - Navigating through JSON object in reverse (from leaf to root) direction

Retrieve the text content from the HTML document

What could be causing React to throw an invalid hook error when using useRoutes?