Vue.js Blog with Squidex
Quickly Deploy a Simple Vue.js Blog with Squidex
Last updated
Quickly Deploy a Simple Vue.js Blog with Squidex
Last updated
This article provides you with instructions on how to quickly deploy a Vue.js blog with Squidex Cloud. The same approach can also be used for self-hosted Squidex. For installation instructions click here.
Account at cloud.squidex.io (or a self-hosted Squidex).
Account at app.netlify.com.
Account at github.com.
For local deployment / development:
nodejs 16 or above.
npm 8 or above.
For this quick-start, you can create an App with pre-populated schemas directly in Squidex. To do so, follow the steps below:
Navigate to https://cloud.squidex.io and login. (If you do not yet have an account, create one).
Click Starter Sample Blog (1), give it a unique name (2) such as vuejs-blog-with-squidex-[your_initials] and click Create (3).
Click on the newly created App to navigate into it. You should also make a note of the App Name, as it will be required later in the instructions.
In this step, we will create a client that will be used by the Vue.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, so as a best practice, we don't recommend that it's used.
Navigate to Settings (4) > Clients (5) in the App. Next enter a Name for the client (6) and click Add Client (7).
This creates a new client with the role of Editor. Copy (8) the Client Id and Client Secret, as they will also be required along with the App Name later in the instructions.
You are now ready to use this App with the code.
If you prefer to run the sample code locally, proceed with these steps here.
You can deploy the Vue.js code using various methods such as self-hosting, as a Docker container or 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 to 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 Deploy to Netlify button below, the following steps will occur:
You will be redirected to Netlify and prompted to sign in. (If you don't yet have an account visit https://app.netlify.com/signup and create an account first).
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.
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.
Next, Netlify will deploy the App and provide a URL to access the App. (Netlify runs the App in a starter plan, which is free).
Start by cloning the Vue.js sample blog code to your machine:
git clone https://github.com/sangramrath/squidex-vuejs-blog-starter.git
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.development and .env.production.
Add the App name, Client ID and Client Secret values noted down earlier. For the URL, use https://cloud.squidex.io if using Squidex Cloud or the URL to your Squidex instance, e.g. http://localhost:5000 if you run it locally.
The final file may look something like this:
Run npm install to install the node modules and setup the project.
Run npm run serve to compile and run it in development mode. This will serve the App at http://localhost:8080/. (sample screenshot below):
The development mode supports hot-reload for any live changes.
Access your App locally, it should display your content fetched from Squidex. The Starter Sample Blog App at Squidex has only one post.
