Hi there, I'm Ali Dhuniya! 👋
Currently, I'm improving my Frontend skills by making projects

This is the first website that I built with some backend service. Previously I have worked with local JSON data and for the nontechnical person, it's difficult to edit, update, and delete the content. That's where CMS like Strapi comes handy.

Strapi is open-source Headless CMS. With Strapi you can design APIs fast, manage content easily.

check twitter discussion

If you're thinking whether strapi released a stable version or not? They have released a stable version 3.05 however there are not many resources on strapi especially with vanilla JS as strapi is a very new Headless CMS compare to other CMS like contentful. And I appreciate the Strapi team for publishing so many articles and tutorials on strapi.

As I told you this is my first website with CMS so it was challenging for me but I went through and gain a lot of information while making this site with strapi. I'm not going to tell you to, step by step to create this school website but in this article, I will show you how to find a solution, where to ask a question, setup, configuration and many more.

I have learned how to read official docs where and how to ask questions. You see the vast majority of resources on the web are basics stuff and standard solution - Fredrik Christenson.

timing: 6:05 - 8:14

Every time I came across a problem while working with strapi, immediately I started thinking, I think I should stop using strapi because there are not many resources for specific things and it's not that much stable. As I said it is my first time working with CMS and I choose strapi because it's an open-source project. So did I gave up, No. So How I overcome this issue? Well, ask questions whenever you came across a problem but make sure you have done a lot googling first before you ask questions on GitHub issue, discussion, and on the slack channel.

So let's walk through what are things that I came across while building this school website?

1. How Do I Know? I have installed strapi successfully npx create-strapi-app my-project --quickstart

When you run npx create-strapi-app my-project --quickstart or yarn create strapi-app my-project --quickstart then make sure after installation it opens a new tab automatically with this URL http://localhost:1337/admin/auth/register and you'll find the demo on strapi youtube channel. In my case, it didn't open in a new tab and throws a bunch of errors on the terminal. see point 2 for the solution.

2. Why does your strapi installation fail?

In my case, it fails with a bunch of errors and I open a GitHub issue and strapi employee address this issue very well. Check this github issue post I'm getting an error while installing strapi locally with npx

Basically, check your nodeJS version on your system and make sure you're running node 12 which is the LTS version. I use volta.sh for managing and switching nodeJS version Switch back to node 12 and run the installation command again and you'll see it's working.

3. Why I can't able to fetch images? 404 error(Not Found)

When you fetch images from strapi cms without prefix URL localhost:1337 then it will give you 404 error but with other contents like fetching text it works. And I ask this question on strapi slack channel and one of the members said use prefix URL of strapi backend which is localhost:1337 and on production, you have to change it to domain URL instead of localhost like your-strapi-backend-url https://strapidemo.herokuapp.com

You can find the github discussion post here: Why I can't able to fetch Img and show it on a web page?

However when you installed Cloudinary service provider then you don't need to add a prefix before image url like

<a href="#"class="navbar__logo"><img src="${localhost}/{result[0].logoImg.url}" /></a>

4. I can't able to fetch through API id routes? 404 error

What do I mean? Take a look below the video

strapi automatically add plural to collection type name for e.g in this below picture when you create "sweater" collection type then strapi automatically change into plural form like "sweaters"

But this was not the issue with me, I have created collection type with camelCase and while requesting through API id it was throwing 404 error and make sure you have enabled public roles and permission

The below video shows the solution

for example, see below image and try to get request on web console

try https://strapicmsdemo.herokuapp.com/home-section1 even if you add "s" at the end it will give 404 error https://strapicmsdemo.herokuapp.com/home-section1s or if you try with exact same collection type name like https://strapicmsdemo.herokuapp.com/HomeSection1S will give an error, try these URL's and it's deployed strapi application of school website

so how to get the correct API route? Well I ask this question in strapi slack channel and one of the members solved this issue basically you have to check the path of your route in strapi folder for e.g here is exact path of HomeSection1S collection type is home-section-1-s

Here is the screenshot from slack channel

If you don't want weird URL, use lowercase

5. Images disappearing from Media Library after ~ 1 hour on Heroku / Postgres Hobby deployment

I had the same issue and Strapi describe something like:

Like with project updates on Heroku, the file system doesn't support local uploading of files as they will be wiped when Heroku "Cycles" the dyno. This type of file system is called ephemeral, which means the file system only lasts until the dyno is restarted (with Heroku this happens any time you redeploy or during their regular restart which can happen every few hours or every day).

Due to Heroku's filesystem, you will need to use an upload provider such as AWS S3, Cloudinary, or Rackspace. You can see a list of providers from both Strapi and the community on npmjs.com

So you need to install some kind of upload provider. Below I use Cloudinary.
For clodinary

1. Install clodinary package via npm or yarn
   npm i strapi-provider-upload-cloudinary

2. Create Free account on Cloudinary and you'll get cloud_name,secrete_key and api_key on the dashboard

1. All you need to do is to create a file at extensions/upload/config/settings.json

Update extensions/upload/config/settings.json

{  
  "provider": "cloudinary",  
  "providerOptions": {
    "cloud_name": "YOUR CLOUDINARY CLOUD NAME",
    "api_key": "YOUR CLOUDINARY API KEY",
    "api_secret": "YOUR CLOUDINARY API SECRET"  
  }
}

1. Fill the information of Cloudinary on setting.json file and push changes after that your image will not disappear

6. How to change the default Admin URL localhost:1337/admin?

Change access URL

7. How to Deploy strapi backend on Heroku?

On the various platforms you can deploy strapi app. see official docs. Strapi Deployment option

steps:

• create Heroku Free account
• After sign up create a new app on Heroku
• Go to Resources tab and add Postgres add-on
• set up a Config Var with DATABASE_URL. You can view this in the Settings tab
• So based from the DATABASE_URL value: postgres://rmejrriyzxttjz:715c7e46767e990a89e5afdaf1f07185e488005bcd3af253d094921c6040a534@ec2–54–235–96–48.compute-1.amazonaws.com:5432/d9v98qi5j82om6

All we have to do is slice carefully copy values and add each config vars one by one. So based on the above value, we can get the following and add them as follows:

DATABASE_HOST = ec2–54–235–96–48.compute-1.amazonaws.com
DATABASE_NAME = d9v98qi5j82om6
DATABASE_AUTHENTICATION_DATABASE = d9v98qi5j82om6
DATABASE_USERNAME = rmejrriyzxttjz
DATABASE_PASSWORD = 715c7e46767e990a89e5afdaf1f07185e488005bcd3af253d094921c6040a534
DATABASE_PORT = 5432 

• On your local machine, change SQLite (local database) into the Postgres database. By default strapi comes with SQLite localhost database and localhost SQLite will not work on the production environment.

go to ./config/database.js, comment the localhost sqlite information and add the contents of database.js with the following:

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: env('DATABASE_HOST', '127.0.0.1'),
        port: env.int('DATABASE_PORT', 27017),
        database: env('DATABASE_NAME', 'strapi'),
        username: env('DATABASE_USERNAME', ''),
        password: env('DATABASE_PASSWORD', ''),
      },
      options: {
        ssl: false,
      },
    },
  },
});

Make sure you comment the SQLite database and keep it there with comments because this will help you to switch between database when it required changes

• Install the pg node module
  npm install pg --save

• Make sure you have install Cloudinary package too and configure it as I have mentioned in above point number 5

• create a separate repository for your backend strapi model and push your strapi application on github

• on Heroku go to the deployment section and connect with github app and select the strapi backend application repository. Tick mark automatic deployment and scroll down and click on ### Deploy Branch

• wait for minutes and you'll have a successful deployment
  If you don't see admin button then do it manually like domainurl/admin

This is how you deploy your strapi backend model, now you can start consuming with frontend technologies like React, Gatsby. Whether you want to deploy existing strapi apps or newly created app apply the same process. If you have added contents on models then it will automatically disappear the contents on production. so a safe way is to build a collection type model with the structure only on the local machines and add contents only on the production environment.

8. Why can't I create or update content-types in production?

It's because of how NodeJS works as a strapi team mention in their docs. From docs At this time and in the future there is no plan to allow model creating or updating while in a production environment, and there is currently no plans to move model settings into the database. There is no known nor recommended workarounds for this. For more visit: reate-or-update-content-types-in-production

To update, add and edit, first you need to make changes with sqlite database on local machine then push it on github make sure you change sqlite database into postgress as I mention in point number 7. Also enable automatic deploys from master on your Heroku account. You can also use Heroku CLI to push changes.

9. How to push changes on Strapi backend?

steps:

• First switch back to localhost database sqlite
  

• run command on the terminal to open admin pannel npm run develop

• log in your account and now you can edit, update and delete content type and change what you want

• After that, to push changes, switch back to your production database(postgress) and commit changes to your github repo

• to deploy changes on Heroku, make sure you already enabled automatic deployment. If you haven't then re-connect your github repo again

• open the admin panel on production and you'll see changes that you made locally

10. That's all I have with strapi v 3.05 but strapi keeps on pushing changes so you may encounter other or new issues while creating your project. Simply ask questions and one of the queries I have with pdf file not accessible from the media library and strapi slack members didn't reply yet. Hope they will solve it

Connect Strapi with twitter, StackOverflow, github, slack channel, youtube channel. For more visit Strapi

School Website Demo Video

Thank you so much for reading my broken english

Live SchoolWebsite

Github code

Hit the Star on Repo if you benefit from this article and share with your friends who want to try strapi CMS

Bonus

Ecommerce-web-app-vanillaJS-with-strapi

Very Small Bazar Business ecommerce clothing web app for latest brand with backend headless Strapi CMS - Get Request only

See Live

More Resources:

• frontend-developers-headless-cms
• Official Docs
• Deploying Strapi with Postgres database to Heroku
• FAQ
• Images dissapearing from Media Library after ~ 1 hour on Heroku / postgres Hobby deplyoment
• Cloudinary package
• Websites Showcase
• About Strapi Developments - Roadmap

Have a great day.