Back-end for Gatsby v3 App Front-end
Requirements:
npm i
npm run develop
rename / replace tmp
=> .tmp
directory
Credentials for the DB:
- admin@admin.com
- Admin2000
gives structure for app data
-
Content-Types Builder => Create new collection type => 'JOB-sections':
- text field => 'COMPANY' => Advanced settings => Required field (check)
- text field => 'POSITION' => Advanced settings => Required field (check)
- text field => 'DATE' => Advanced settings => Required field (check)
- add another field => component => use an existing component => select a component => 'JOB-description' => Finish
-
Content-Types Builder => Create new component => 'JOB-description':
- text field => 'NAME' => Advanced settings => Required field (check) => Finish => Save
adding app data
- Collection Types => 'JOB-sections' => Add New JOB-sections:
- create an entry => fill the fields => Finish => Save => Publish
- check the result localhost:1337/JOB-sections
=>
{"statusCode":403,"error":"Forbidden","message":"Forbidden"}
- Settings => Roles & Permissions
=> Public => check
find, findone
fields => Save - check the result localhost:1337/JOB-sections
=>
[{"id":1,"company":"Praesent mollis augue","position":"Integer accumsan augue eu nisl ultrices tempor","date":"10/10/2010","published_at":"2021-05-04T08:28:59.144Z","created_at":"2021-05-04T08:27:56.349Z","updated_at":"2021-05-04T08:28:59.211Z","description":[{"id":1,"name":"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."},{"id":2,"name":"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."},{"id":3,"name":"Proin varius dui sed nulla dignissim porta ut et elit. Praesent id erat sit amet eros malesuada laoreet a non velit."}]}]
-
Content-Types Builder => Create new collection type => 'PROJECTS-sections':
- text field => 'TITLE' => Advanced settings => Required field (check)
- text field => 'DESCRIPTION' => Long text => Advanced settings => Required field (check)
- media field => 'IMAGE' => Single media => Advanced settings => Required field (check)
- text field => 'GITHUB' => short text
- text field => 'URL' => short text
- boolean field => 'FEATURED' => Advanced settings => Required field (check) => false
- add another field => component => use an existing component => select a component => 'STACK-Item' => Advanced settings => Required field (check) => Finish
-
Content-Types Builder => Create new component => 'STACK-Item':
- text field => 'TITLE' => Advanced settings => Required field (check) => Finish => Save
- Collection Types => 'PROJECTS-sections' => Add New PROJECTS-section:
- create an entry => fill the fields => Finish => Save => Publish
- image 1
- image 2
- image 3
- image 4
- Settings => Roles & Permissions
- check the result localhost:1337/PROJECTS-sections
- Content-Types Builder => Create new collection type => 'BLOG-sections':
- text field => 'TITLE' => Advanced settings => Required field (check)
- text field => 'DESCRIPTION' => Long text => Advanced settings => Required field (check)
- rich text field (Markdown) => 'CONTENT' => Advanced settings => Required field (check)
- media field => 'IMAGE' => Single media => Advanced settings => Required field (check)
- uid field => 'SLUG' => attached field => title
- enumeration field => 'CATEGORY' => category value1, value2, value3 => Advanced settings => Required field (check)
- text field => 'DATE' => date => Advanced settings => Required field (check)
- Collection Types => 'BLOG-sections' => Add New BLOG-section:
- create an entry => fill the fields => Finish => Save => Publish
- image 3
- Settings => Roles & Permissions => restart Gatsby server (Front-end)
- check the result localhost:1337/PROJECTS-sections
// gatsby-config.js (add => frontend => check result in GraphiQL => AllStrapiProjects)
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: `http://localhost:1337`,
queryLimit: 1000,
contentTypes: [`Job-sections`, `Projects-sections`, `Blog-sections`]
}
}
Stored in Strapi, single type
- Content-Types Builder => Create new single type => 'ABOUT-page':
- text field => 'TITLE' => Advanced settings => Required field (check)
- text field => 'INFO' => Long text => Advanced settings => Required field (check)
- media field => 'IMAGE' => Single media => Advanced settings => Required field (check)
- add another field => component => use an existing component => select a component => repeatable component => 'stack_item' => Advanced
- Pages => About-page => fill the content => Save => Publish
- Settings => Roles & Permissions => check 'find' => Save
- check the result localhost:1337/ABOUT-page
connect the DB to see the tables
jdbc:sqlite:****\.tmp\data.db
DBMS: SQLite (ver. 3.34.0)
Case sensitivity: plain=mixed, delimited=mixed
Driver: SQLite JDBC (ver. 3.34.0, JDBC2.1)
Ping: 78 ms
// config/database.js
module.exports = ({ env }) => ({
defaultConnection: 'default',
connections: {
default: {
connector: 'bookshelf',
settings: {
client: 'sqlite',
filename: env('DATABASE_FILENAME', '.tmp/data.db'),
},
options: {
useNullAsDefault: true,
},
},
},
});
External (CDN) media storage at Cloudinary
- login
- get:
- Cloud name: dulbvmp6k
- API Key: 139254115365111
- API Secret: N6TLC19p_WotC_UzxI53YqebnRY
- API Environment variable: CLOUDINARY_URL=cloudinary://139254115365111:N6TLC19p_WotC_UzxI53YqebnRY@dulbvmp6k
- install strapi-provider-upload-cloudinary
- create:
// ./config/plugins.js
module.exports = ({ env }) => ({
// ...
upload: {
provider: 'cloudinary',
providerOptions: {
cloud_name: env('CLOUDINARY_NAME'),
api_key: env('CLOUDINARY_KEY'),
api_secret: env('CLOUDINARY_SECRET'),
},
actionOptions: {
upload: {},
delete: {},
},
},
// ...
});
// .env
CLOUDINARY_NAME=dulbvmp6k
CLOUDINARY_KEY=139254115365111
CLOUDINARY_SECRET=N6TLC19p_WotC_UzxI53YqebnRY
TIP
When you use --quickstart to create a Strapi project locally,
a SQLite database is used which is not compatible with Heroku.
Therefore, another database option must be chosen.
WARNING
For security reasons, the Content Type Builder plugin is disabled in production.
To update content structure, please make your changes locally and deploy again.
Additionally, if you wanted to change the default production mode in Heroku,
it wouldn't work as the file system is temporary.
Strapi writes files to the server when you update the content-types
and these updates would disappear when Heroku restarts the server.
Therefore, modifications that require writing to model creation or other json files,
e.g. creating or changing content-types, require that you make those changes
on your dev environment and then push the changes to Heroku.