How I build a School Website with "Strapi" CMS using Vanilla JS?
Tags: strapi, javascript, headlesscms, html
Published: 2020-07-23 12:49:26

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

This is the first [website](https://schoolweb.netlify.app/) 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](https://strapi.io/)** comes handy.

**[Strapi](https://strapi.io/)** is open-source Headless CMS. With Strapi you can design APIs fast, manage content easily. 

![Strapi discussion tweet](https://dev-to-uploads.s3.amazonaws.com/i/o7mhxla6u0bbc57fpsdy.png)

[check twitter discussion](https://twitter.com/ASpittel/status/1281305757049401352)

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](https://alidhuniya.github.io/schoolWebsite-StrapiCMS/) 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**.

{% youtube OFLU70Slfec %}
*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](https://schoolweb.netlify.app/)?

### 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](https://github.com/strapi/strapi/issues/6991)

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](https://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.

![strapi issue](https://dev-to-uploads.s3.amazonaws.com/i/c6nfxldf6qptdnyygrcj.png)


### 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`

![slack](https://dev-to-uploads.s3.amazonaws.com/i/qzn346vkocg5ygvxfh45.png)

You can find the github discussion post here: [Why I can't able to fetch Img and show it on a web page?](https://github.com/strapi/strapi/discussions/7013)

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

{% youtube uhx33wTLnmk %}
 

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"

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2v5keldlxxl0t9jykaok.png)

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

{% youtube rXrm-EWS6JI %}



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

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ix0tk2tqn7f0d74aqqg.png)

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](https://alidhuniya.github.io/schoolWebsite-StrapiCMS/)**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f8hdfuku0b62ivbtq426.png)

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`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w28lfx78w6bzk4q9blwm.png)

**Here is the screenshot from slack channel**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3kgaywjuqf49j2xx4kw4.png)

**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](https://github.com/strapi/strapi/issues/6359) 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](https://www.npmjs.com/search?q=strapi-provider-upload-&page=0&perPage=20) 

So you need to install some kind of upload provider. Below I use Cloudinary.
For clodinary
1. Install [clodinary package](https://www.npmjs.com/package/strapi-provider-upload-cloudinary) 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mu4dlo196bwaot89mq4q.png)


3. 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"  
  }
}
```
4. 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](https://strapi.io/documentation/v3.x/admin-panel/customization.html#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](https://strapi.io/documentation/v3.x/getting-started/deployment.html#hosting-provider-guides)

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**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hrhr7cxee42uv51f19ve.png)

- 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](https://strapi.io/documentation/v3.x/getting-started/troubleshooting.html#why-can-t-i-create-or-update-content-types-in-production-staging)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/17iteo3oo6706grpro5u.png)

### 9. How to push changes on Strapi backend?

steps: 

* First switch back to localhost database sqlite
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hrhr7cxee42uv51f19ve.png)

* 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iskccpf295zoes2f7you.png)

Connect Strapi with `twitter, StackOverflow, github, slack channel, youtube channel`. For more visit [Strapi](strapi.io) 

## School Website Demo Video 
 
{% youtube 1PyOObuiy24 %}

#### Thank you so much for reading my broken english

## [Live SchoolWebsite](https://schoolweb.netlify.app/)
## [Github code](https://github.com/Alidhuniya/schoolWebsite-StrapiCMS)

<!-- #### Note: Because of internal server error on Heroku, I removed the backend part but still you can see the website overview on youtube. The issue was related to "application error and h10 error" and the below image contains Heroku logs and this issue still not solved. You can find the exact problem on StackOverflow forum link: https://stackoverflow.com/questions/61123480/issue-with-code-h10-error-when-deploying-strapi-with-heroku 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jn4wk8zocuji88anoihu.png) -->


**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](https://alidhuniya.github.io/Ecommerce-web-app-vanillaJS-with-strapi/index.html)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ycp5ehjb238dctqddur.png)
 

## More Resources:

* [frontend-developers-headless-cms]
 (https://strapi.io/blog/frontend-developers-headless-cms)
* [Official Docs](https://strapi.io/documentation/v3.x/getting-started/quick-start.html)
* [Deploying Strapi with Postgres database to Heroku](https://medium.com/react-cebu/deploying-strapi-with-postgres-database-to-heroku-bypassing-required-credit-card-4134b59acc35)
* [FAQ](https://strapi.io/documentation/v3.x/getting-started/troubleshooting.html#frequently-asked-questions)
* [Images dissapearing from Media Library after ~ 1 hour on Heroku / postgres Hobby deplyoment ](https://github.com/strapi/strapi/issues/6359)
* [Cloudinary package](https://www.npmjs.com/package/strapi-provider-upload-cloudinary)
* [Websites Showcase](https://strapi.io/tutorials)
* [About Strapi Developments - Roadmap](https://portal.productboard.com/strapi/1-public-roadmap/tabs/2-under-consideration)

### Have a great day.