Strapi
Posted By Sebastian

Getting Started With Strapi EP1: Introduction & Setup


Subscribe On YouTube

Episodes

Welcome, this is the first episode of the Getting Started With Strapi tutorial series on CodingTheSmartWay.com. Without any prior knowledge you’ll learn everything which is needed to setup Strapi which can then be used as you headless CMS back-end for any front-end technology.

Strapi is a new generation of Content Management Systems (CMS), a headless CMS. It offers basic CMS functionalities for managing content and users.

Strapi gives you freedom of choosing the rest of the components of your website including database and the technology you want to use to present your content (e.g. front-end frameworks). That’s the reason why Strapi is categorized as a headless CMS.

Strapi is based on JavaScript and Node.js. You can create and manage your content easily and then access it via REST web services or GraphQL.

In the first episode of the Getting Started With Strapi you’ll receive a short introduction to Strapi, and we’ll cover everything what is needed to get Strapi installed on your system.

The project’s website can be found at https://strapi.io/:

01.png

Creating A New Strapi Project

The first step to get started with Strapi is to create a new project from scratch. As a prerequisite you should also make sure that you have installed Node.js on your system. If that’s not the case you can go to https://nodejs.org/ and follow the instructions to download and install Node.js on your platform.

In general there are two ways of setting up a new Strapi project:

Creating A New Strapi Project Via NPX

The first option is the use the npx command (which comes with Node.js) in the following way:

$ npx create-strapi-app my-strapi-project --quickstart

This is creating a new project folder named my-strapi-project. Strapi is downloaded into that folder and needed dependencies are being installed.

By using the –quickstart command line option we’re creating a Strapi project with some default settings and a SQLite database attached. In general Strapi is able to connect to a variety of databases such as PostgreSQL, MongoDB, MySQL or MariaDB. However using SQLite here is the easiest option because we do not need to setup a database server first.

Creating A New Strapi Project Via Yarn

The second option for creating a new Strapi project is by using yarn:

$ yarn create strapi-app my-strapi-project —quickstart

Yarn is another package manager and can be installed on top of Node.js. More information can be found at https://yarnpkg.com/.

Accessing The Admin UI And Creating An Administrative User

Once the creation of the Strapi project is concluded, the web server is started and the admin interface is opening up in the browser automatically:

10.png

By default the admin interface is being accessible via http://localhost:1337/admin . When first accessing the admin interface you’re asked to create an administrative user by filling out the form. For this user you need to specify the username, password and email address.

Once you’ve entered everything and pushed the button Ready to start you’re being redirected to the admin panel you can see in the following screenshot:

11.png

This admin user interface gives you access to all Strapi components & functionalities. E.g.:

  • Use the Content Type Builder to create new content types which are the prerequisite for managing you data
  • Create user, roles and assign permission
  • Manage static assets by using the Media Library
  • Accessing the Plugins Marketplace to extend Strapi’s functionality by adding further plugins

What’s Next

Now that you have Strapi up and running we’re going to use the Content Type Builder in the next episode to create custom content types which will be used to manage our data.

Advertisement: Top Online Courses

If you’d like to learn Strapi from the ground up you should take a look at the following great Strapi online course:

The Complete Strapi Course*
Build Apps at the speed of thought with the simplest most versatile open source headless CMS

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.