React.js blog with Squidex CMS
Quickly deploy a simple React.js blog with Squidex
This articles provides you with instructions on how to quickly deploy a React.js blog with Squidex Cloud. The same approach can also be used for a self-hosted Squidex. For installation instructions click here.
For this quick start we can create the app with pre-populated schemas directly in Squidex. To do this follow the below steps:
- 1.Navigate to
cloud.squidex.ioand login. (If you do not an account, create one.)
- 2.Click Starter Sample Blog (1), give it a unique name (2) such as
reactjs-blog-with-squidex-[your_initials]and click Create (3).Creating the Starter Sample Blog app on Squidex
- 3.Click on the newly created app to navigate into it. Also make a note of the app name as it will be required later in the instructions.Accessing the Squidex app
In this step we will create a client that will be used by the React.js code to talk to Squidex. When an app is created, there is a default client already present however it has an Owner role by default and hence not recommended to be used as a best practice.
- 1.Navigate to Settings (4) > Clients (5) in the app. Next enter a name for the client (6) and click Add Client (7).Create a client for React.js
- 2.This creates a new client with the role of an Editor. Copy (8) the
Client Secretas they will also be required along with the
app namelater in the instructions.Copy the Client Id & Client Secret
You are now ready to use this app with the code.
You can deploy the React.js code using various methods such as self-hosting, as docker container, in Kubernetes etc. You can also deploy them to various modern, fast and developer friendly serverless platforms such as Netlify. The instructions here cover the latter.
Netlify is a platform that helps you quickly build and deploy sites to a global network with a host of features and you can get stated for free.
When you click the button below the following steps will occur:
- 2.Next, you will be asked to connect to your GitHub account. This step is required as the deployment process will clone the code to a repository in your own account.
- 3.Finally, you will be prompted to enter a name for the repository and the environment variables for the Squidex app. Enter the values noted down from before. Your values will be different than the values in the screenshot.Configuring the Netlify site
- 4.Post this Netlify will deploy the app and provide a URL to access the app. (Netlify runs the app in a Starter plan which is free)
When ready click Deploy to Netlify to get started.
- 1.Start by cloning the React.js sample blog code to your machine
git clone https://github.com/sangramrath/squidex-reactjs-blog-starter.git
- 2.Next, create the environment variables files using the example file available i.e.
.env.example. To separate your variables from development and production you can create
.env.production. Add the app name, clientid and clientsecret values noted down earlier. For url use
https://cloud.squidex.ioif using Squidex cloud or the url to your Squidex instance, e.g.
http://localhost:5000if you run it locally. The final file may look something like this:Environment file example
npm installto install the node modules and setup the project.
npm startto compile and run it in development mode. This will serve the app at
http://localhost:3000/. (sample screenshot below)Successfully running React.js appThe development mode supports hot-reload for any live changes.
- 5.Access your app locally, it should display your content fetched from Squidex. The Starter Sample Blog app at Squidex has only one post.Blog running locally