Strapi Nuxt Manual Setup

README.md

Strapi Nuxt Manual Setup

This is recommended if you want to have more direct control of your setup. However using the yarn create strapi-starter will automate this process

Initial Setup

1. Create a project directory and initialize it as a git repo

• Add a top level package.json. This will be used to connect the frontend and backend to one another

{
"name": "simple-blog",
"private": true,
"version": "0.0.0",
"scripts": {
  "develop:backend": "yarn --cwd backend develop",
  "develop:frontend": "wait-on http://localhost:1337/admin && yarn --cwd frontend develop",
  "develop": "cross-env FORCE_COLOR=1 npm-run-all -l -p develop:*"
},
"devDependencies": {
  "npm-run-all": "4.1.5",
  "wait-on": "5.2.1",
  "cross-env": "7.0.3"
}
}
- `yarn install`
- You will run your front and backend from this position. however you can also run either from their respective directories too

2. Set up your backend

• yarn create strapi-app backend --quickstart --no-run
  • --quickstart will auto-select the quickstart function
  • --no-run will stop the admin panel to auto generate
• go into the backend/ directory and install graphql
  • yarn strapi install graphql

3. Set up your frontend

• yarn create nuxt-app frontend
  • this will create your initial frontend directory
  • add apollo and graphql yarn add @nuxtjs/apollo graphql
    • add the following to your nuxt.config.js

      modules: [
        '@nuxtjs/apollo',
      ],
      apollo: {
        clientConfigs: {
          default: {
            httpEndpoint: process.env.BACKEND_URL || "http://localhost:1337/graphql"
          }
        }
      }
      

      • NOTE This will look different when you deploy to heroku
      • We will need to create an .env file to secure this app. In your nuxt.config.js file add

      env: {
        strapiBaseUri: process.env.API_URL || "http://localhost:1337"
      }
      

      • you will need to use your heroku url