Forem: Adam Miedema

Unleashing Local AI - Transform Your Coding Experience with Msty

Adam Miedema — Thu, 15 May 2025 20:41:39 +0000

In today’s fast-paced software development world, having a trusty coding assistant can make all the difference. Local AI models are gaining traction because they provide quick, offline support while keeping your data secure. Enter Msty, your go-to tool for seamlessly integrating local AI models into your coding workflow.

Getting Started with Local AI Models

Msty makes it easy to leverage powerful local models like DeepSeek, Mistral, and Gemma. Here’s how to get started:

Install Msty: Download Msty App and set it up on your machine or use Msty Studio for a web-based experience.
Integrate with VS Code: Choose between using Copilot or the Roo Code extension, both are available in Visual Studio Code.

Using Copilot with Local Models

GitHub Copilot is like having a coding partner right by your side. To connect it to your local models:

Open Settings in VS Code: Click the gear icon in the bottom left corner and select "Settings."
Set Up Your API Provider: Find "Bring Your Own Key" in settings for Ollama and enter the local model endpoint from Msty.
Choose Your Model: Go to "Manage Models," select your desired local model, and you’re ready to go!

With Copilot, you can ask questions directly in your code editor, making your coding life much easier.

Exploring Roo Code for Tailored Assistance

Looking for more customization? Try Roo Code, an open-source extension that allows for advanced model fine-tuning. Here’s how to set it up:

Install Roo Code: Search for "Roo" in the VS Code extensions tab and install it.
Create a Profile: Open Roo Code, click the plus icon, and name setup a new profile (like "Msty").
Connect Your Models: Use the endpoint from Msty, select Ollama as the API provider, and then enter the local model endpoint from Msty to link up your local models.

Roo Code offers customizable settings that let you tailor your coding assistant to fit your needs.

Final Thoughts

Using local AI models is a game-changer for developers. With Msty simplifying the process, you can easily integrate tools like GitHub Copilot and Roo Code into your workflow. Dive in, explore these options, and elevate your coding experience with local AI assistance!

How to Set Up Azure OpenAI in Msty Studio - A Step-by-Step Guide

Adam Miedema — Thu, 08 May 2025 03:39:56 +0000

If you're looking to combine the power of OpenAI’s large language models (LLMs) with the security and scalability of Microsoft’s cloud infrastructure, Azure OpenAI is the way to go. With this service, you can access state-of-the-art models like GPT in a way that's enterprise-ready. Meaning, you get all the cutting-edge AI capabilities, plus the security, compliance, and integration tools your organization needs.

In this guide, we’ll walk through how to set up Azure OpenAI and connect it to Msty Studio.

Getting Started with Azure OpenAI

Before diving in, make sure you have an Azure account and access to the Azure OpenAI service. Once that’s ready, follow these steps to deploy your first model.

🚀 Set Up Azure OpenAI

Head to the Azure Portal.
Use the top search bar to look for Azure OpenAI.
If you don’t already have a resource, click Create Azure OpenAI.
Follow the prompts to configure and create your new resource.
Once it's created, select the resource from your list.
At the top of the resource page, click Go to Azure AI Foundry Portal.
In the Foundry portal, click Deployments from the left-hand menu.
Click the Deploy Model button in the top menu. Choose between a base or fine-tuned model.
In the popup, select the model you want, then hit Confirm and Confirm and Continue.
After deployment, you’ll see the Target URI. Copy it—you’ll need it later.
Just below the URI, you’ll find the Key. Copy that too.

Your Target URI will look something like this:

https://<your-resource-name>.cognitiveservices.azure.com/openai/deployments/<model-name>?api-version=<api-version>

From that, make note of:

your-resource-name
model-name
api-version

You’ll need all three for the next part.

Connecting Azure OpenAI to Msty Studio

Now that you’ve deployed your model, it’s time to plug everything into Msty Studio.

🔧 Msty Studio Setup

Go to Msty Studio.
Click Model Hub in the left-hand menu.
Select Add Provider.
Choose Azure OpenAI from the list.
Paste your Key into the API Key field.
In the Base URL field, paste the first part of your Target URI:

   https://<your-resource-name>.cognitiveservices.azure.com/openai/deployments

(Alternatively, you can just enter your Resource Name instead.)

Enter your API Version.
Select the model(s) you've deployed. All available models will appear, but you can only use the ones tied to your Azure resource.
Click Add Provider to finish.

🎉 Start Chatting with Your Model

That’s it! Head over to the chat interface in Msty Studio and strike up a conversation with your Azure OpenAI model.

Setting up Azure OpenAI might feel technical at first, but once it’s connected to Msty Studio, working with advanced AI becomes intuitive and even fun. Whether you're building enterprise tools or experimenting with creative prompts, this setup gives you a solid foundation to explore what's possible.

The AI Settings Dictionary

Adam Miedema — Sat, 03 May 2025 21:39:57 +0000

You may have noticed some LLMs allow you the ability to control certain settings - typically paired with a brief explanation that still leaves you wondering exactly what they do.

Fear not! This is the living dictionary of AI settings. We will keep this up to date as we learn more about how these settings work and what they do.

Context Message Limit

What it is

How many past messages in a conversation the AI can "remember."

Why it matters

Imagine texting someone with short-term memory. If the limit is 10 messages, the AI forgets anything before that.
Important in long chats, like customer support or storytelling, where the AI needs to follow along.

When to change it

Increase it for better conversation memory.
Decrease it if you're seeing errors, or to save memory.

Context Window Size

What it is

The total number of tokens (pieces of words) the AI can consider at once — both your message and its reply.

Why it matters

Think of it like a whiteboard. A bigger whiteboard = more info the AI can “see” at once.
If your input is too long (e.g., an entire book), it might cut off earlier parts if they don’t fit.

When to change it

Use large windows for long documents, coding projects, or full email threads.
Not something you usually adjust, but good to know when picking a model (e.g., GPT-4-Turbo can handle 128k tokens).

Frequency Penalty

What it is

Tells the AI: "Don’t keep using the same words over and over."

Why it matters

Without it, the AI might write: “This is very very very good.”
Makes writing sound more natural and less robotic.

Range

0 to 2

Low (0) - repetition allowed.
High (1–2) - more variety, less echo.

Typical value

0.5

When to change it

Raise it if the AI is looping or repeating itself.
Lower it for tasks like summarizing where repetition might be okay.

GPU Layers

What it is

A performance setting for people running AI locally. It decides how much of the model runs on a GPU (fast) versus CPU (slow).

Why it matters

More GPU layers = faster responses (if your graphics card can handle it).

When to change it

Only in local installations (like using models on your own computer).
You’ll need some technical know-how and a decent GPU.

Max Output Tokens

What it is

This sets how long the AI’s reply can be — in tokens, which are like chunks of words.

Why it matters

Prevents the AI from writing an essay when you just want a sentence.
Saves on cost or time if you're paying per token.

Range

1 to thousands (depending on the model)

Typical value

256–512 tokens (about 100–300 words)

When to change it

Increase it for long answers (e.g., stories, detailed code).
Decrease it for quick replies or summaries.

Presence Penalty

What it is

Encourages the AI to introduce new topics instead of sticking to what it already said.

Why it matters

Great for brainstorming, exploring ideas, or avoiding repetition.

Range

0 to 2

Low (0) - stick to what's already been said.
High (1–2) - add new ideas, mix things up.

Typical value

0.5–1.0

When to change it

Raise it when you want variety (like idea generation).
Lower it if you want the AI to stay focused on a specific topic.

Temperature

What it is

Controls how creative or random the AI is when generating responses.

Why it matters

Think of it like a dial between "robot mode" and "creative mode."

Range

0 to 1

Low (0–0.3) very focused, factual, safe.
- Example: Good for math, summaries, or coding.
High (0.7–1: - more playful, unpredictable, and surprising.
- Example: Useful for stories, jokes, or coming up with weird ideas.

Typical value

0.7

When to change it

Lower for accurate info or professional tone.
Raise for fun, brainstorming, or “think outside the box” tasks.

Top K

What it is

The AI predicts many possible next words — Top K limits its choices to just the K most likely ones.

Why it matters

A low K is like giving the AI a strict script: “Pick from just the top 5 words.”
A high K gives it more freedom: “Pick from the top 50 or even 100!”

Range

1 to 100+

Low (1–10) - safe, predictable — might repeat phrases.
High (50–100) - more creative, but risks weird or off-topic replies.

Typical value

40–50

When to change it

Raise it to make the AI more surprising or fun.
Lower it if you want tighter, more professional responses.

Top P (Nucleus Sampling)

What it is

Instead of limiting the number of word options (like Top K), it limits the total probability.

Why it matters

Imagine a pie chart of likely next words. Top P tells the AI, “Only pick from the smallest slice that makes up, say, 90% of the pie.”
This allows more flexibility than Top K, especially when probability shifts a lot.

Range

0 to 1

Low (0.1–0.3) - very focused and repetitive.
High (0.9–1.0) - much more varied and playful.

Typical value

0.9

When to change it

Lower for more technical, rule-following output.
Raise for more imagination, idea generation, or fun conversations.

Setup your own safe search engine using SearXNG

Adam Miedema — Thu, 01 May 2025 14:42:29 +0000

In this tutorial, we'll walk through how to set up and configure SearXNG, an open-source metasearch engine, for use in your own custom applications - and for use with Msty Studio.

Getting Started

SearXNG is a powerful, privacy-respecting search engine that aggregates results from multiple sources without tracking users.

You can host it yourself to have full control over the behavior, sources, and appearance.

Installation Steps

1. Environment Setup

Before installing SearXNG, first provision a server and setup dependencies.

There are many VPS hosting providers you can choose from - Vultr, Digital Ocean, Hetzner, etc...

For a quick setup, we'll use Cleavr.io to provision a server on our preferred hosting provider and ensure we have a few dependencies installed - which you can check from the Server > Services section in Cleavr:

Nginx
Docker

In Cleavr, you can use their SSH key management to add your SSH key to the server. Also, add a new Generic Port App site to the server you provisioned and ensure the port is set to 8080 when setting up the new site.

Of course, you can use a different server management tool or setup the dependencies manually via the server's terminal - whichever means you prefer to setup the environment.

Once you have your environment setup and ready-to-go, move on to the next steps to install and configure SearXNG.

2. Open Server Terminal

Access your server's terminal via SSH or thru your hosting provider's server console interface.

3. Add Docker User

In this setup, we are using Docker - so let's first create a docker user.

sudo usermod -a -G docker $USER

You don't have to use the docker installation method. However, at the time of this article, the 'Installation Script' method that SearXNG docs have instructions for had an issue with Redis installation failing. If you'd like to avoid Docker, we'd recommend first attempting the installation script method.

4. Pull Docker

Next, run the below command. Swap my-instance to a directory name of your choosing.

mkdir my-instance
cd my-instance
export PORT=8080
docker pull searxng/searxng
docker run --rm \
 -d -p ${PORT}:8080 \
             -v "${PWD}/searxng:/etc/searxng" \
 -e "BASE_URL=http://localhost:$PORT/" \
 -e "INSTANCE_NAME=my-instance" \
 searxng/searxng

5. Verify SearXNG Docker container is running

Run the following command:

docker container ls

You should see a searxng/searxng image running on a container.

6. Edit SearXNG settings

After project has been pulled down, a new searxng directory will be created which contains a settings.yml file. Edit this file using vim or similar.

vim searxng/settings.yml

Locate the search: section and add - json. This is needed because SearXNG disables json responses by default, which is what we'll need for our integration with Msty.

search:
//
formats: - html - json

Next, locate the server: block and then the default_http_headers section. We'll need to add a few access controls to headers so that we do not get CORS errors.

server:
//
default_http_headers:
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Robots-Tag: noindex, nofollow
Referrer-Policy: no-referrer
Access-Control-Allow-Origin: https://msty.studio <-- add this line
Access-Control-Allow-Methods: POST, OPTIONS <-- add this line
Access-Control-Allow-Headers: Content-Type, X-Requested-With <-- add this line

Save the settings file.

7. Restart container

Get the container ID by running:

search:
docker container ls

Grab the container ID and use it in the following command to restart the container:

docker container restart {container id}

8. Verify JSON format is being returned

Before leaving the terminal, let's ensure that JSON is being returned when querying SearXNG.

To do this, you can run the following in the terminal:

curl -v "http://127.0.0.1:8080/search?q=tacos&format=json"

If you see json being returned, then you are all ready to go! If you see a 403 Forbidden error, then you likely did not set json format correctly in settings or you did not restart the container.

9. Configure in Msty Studio Real-Time-Data

Back in Msty Studio, click on the globe icon for Real-Time Data (RTD), select the SearXNG tab, and then enter the endpoint for SearXNG. The endpoint is going to be the domain you setup in Cleavr, or the ip address and port https://your.public.ip.address:8080, or however you may have setup your server in the first step.

If you are using Msty Studio to connect to SearXNG:

Enable RTD and verify that you received real-time data results in the response from the model you are conversing with.

Conclusion

Setting up SearXNG provides a highly customizable and privacy-focused search experience.

Whether you're utilizing it with Msty Studio or running a standalone search portal, SearXNG will help you rest-assured that your searches are private.

Additional Resources

Exploring the Laravel Quick Commands in Cleavr

Adam Miedema — Tue, 20 Jun 2023 18:52:40 +0000

Cleavr.io comes pre-loaded with Laravel focused Quick Commands that can be ran for your production Laravel projects.

But...

Have you ever wondered what they are all for?

Many of the commands are pretty straightforward. Though, there may be some that you aren't exactly clear what the purpose is...

In this blog post, we'll simply go through the different commands and their purpose. Please feel free to use this as your cheat sheet!

Cache commands

Caching is a great way to make your web applications run faster and smoother. With these cache commands, you can easily manage the cache of your production site.

Artisan config cache

Caching your configuration files into a single file can help your application run faster. To do this, use the php artisan config:cache command. This will combine all of your configuration options into one file which will be quickly loaded by the framework. It's a great idea to run the php artisan config:cache command as part of your production deployment process for optimal performance.

php artisan config:cache

Artisan cache clear

The cache clear command will clear out all items from the cache, no matter which cache driver you are using.

php artisan cache:clear

If you'd like to target a particular store, you can use a quick command with a flag to do so. For example, php artisan cache:clear --store redis will clear the redis cache store only.

Furthermore, if you need to clear specific items, you can use the tags flag, like this: php artisan cache:clear --tags=tag1,tag2.

Artisan event clear

If you're using Events in your Laravel application, it's a good idea to cache them for improved performance. The event:clear command can be used to delete your cached Events and rebuild the cache. This is a great way to keep your application running smoothly.

php artisan event:clear

Remove route cache

Caching your routes is a great way to speed up your application's route registration process. If you've added a new route and want to make sure it's registered, you can clear the route cache on the server by running the php artisan route:clear command.

php artisan route:clear

Remove the cached bootstrap files

Laravel makes it easy for you to reset all the caches we've discussed by using a single Artisan command. This is a great way to quickly clear all the caches in your application, without having to run multiple commands.

php artisan optimize:clear

Queue commands

Artisan queue clear

If you're looking to remove all jobs from the default queue and connection, you can easily do so using the queue:clear command.

php artisan queue:clear

You can also create a new quick command and target a specific queue and connection, such as with the following which will target the email queue in redis - php artisan queue:clear redis --queue=emails.

Artisan queue failed

If you're looking to see which jobs have failed, running the queue:failed command will show you the job ID, connection, queue, failure time and other details about the failed jobs that appear in the failed_jobs database table.

php artisan queue:failed

Flush failed queue jobs

Running queue:flush command removes all of the failed jobs from the failed_jobs table.

php artisan queue:flush

Laravel Horizon commands

If you are using Laravel Horizon for your project, which is a Redis-centric dashboard, then you can use the following commands to help manage Horizon.

Pause Horizon

If you need to pause the Horizon process, run the horizon:pause command.

php artisan horizon:pause

Continue Horizon

When you're ready to continue processing jobs, run the horizon:continue command.

php artisan horizon:continue

Check Horizon status

If you'd like to know the current status of Horizon, run horizon:status to check.

php artisan horizon:status

Clear Horizon status

If you would like to clear all jobs from your application's default queue, run the horizon:clear command.

php artisan horizon:clear

Miscellaneous commands

Artisan view clear

It's a good idea to clear the compiled view files of your Laravel application every now and then. To do this, run the view:clear command.

php artisan view:clear

Artisan clear compiled

This command is used to remove the compiled class files from the framework, which are stored in the bootstrap/cache/ directory. By running this command, compiled.php and services.php will both be removed from the directory.

php artisan clear-compiled

Artisan env

Running this command will display what environment-mode the Laravel application is running in; ie: development, staging, production.

php artisan env

How to setup Meilisearch and Laravel Scout

Adam Miedema — Thu, 09 Mar 2023 21:46:57 +0000

public function toSearchableArray()
{
  $array = $this->toArray();

  return [
'id' => $array['id'],
'title' => $array['title'],
'body'=> $array['body']
   ];
}

Step 3: Import existing database records to search indexes

Laravel Scout is like a magical genie, providing us with a simple way to import records. With just one artisan command, you can quickly and easily import data into your database. Let's take a look at an example to see just how easy it is!

❯ php artisan scout:import "App\Models\Post"
Imported [App\Models\Post] models up to ID: 10
All [App\Models\Post] records have been imported.

Step 4: Test out search

>>> App\Models\Post::search('Lorem')->get();
=> Illuminate\Database\Eloquent\Collection {#4219
     all: [
       App\Models\User {#4230
         id: 5,
         title: "Lorem ipsum dolor sit amet, consectetur",
         body: "...Sed ut perspiciatis unde omnis iste natus …",
       },
     ],
   }

Step 5: Install Meilisearch on your server

Install Meilisearch on your server following the official documentation. Use the Quick Script feature in Cleavr to add the following script and then run it on the target server to install Meilisearch.

# Add Meilisearch package
echo "deb [trusted=yes] https://apt.fury.io/meilisearch/ /" | sudo tee /etc/apt/sources.list.d/fury.list

# Update APT and install Meilisearch
sudo apt update && sudo apt install meilisearch

# Launch Meilisearch
meilisearch

Step 6: Add a process monitor for Meilisearch

Now, let's add a process monitor in the Server > Process Monitors section. With a process monitor, you can start Meilisearch and keep it running smoothly.

Update the master key test123@@ with the master key you'd like to use. Keep note of your master key as you'll need to add it in the next section to your environment file.

Step 7: Update your project's environment file

Ready, set, update! It's time to make sure your project environment variables are up to date.

Head over to Deployment > Workflow > Environment and get to work. Don't forget to add the following variables and you'll be good to go.

SCOUT_DRIVER=meilisearch
MEILISEARCH_HOST=http://127.0.0.1:7700
SCOUT_QUEUE=true
MEILISEARCH_KEY=test123@@

Voila! You now have Meilisearch set up and ready to serve up relevant search results in no time. Now you can impress your friends and family with your lightning-fast search capabilities!

Check out Meilisearch documentaion for more info on how to use Meilisearch with your project.

Kiran Mandal

Opening up port 80 and 443 for Oracle Cloud servers

Adam Miedema — Tue, 04 Oct 2022 21:08:01 +0000

Are you working on setting up your Oracle Cloud server and are facing issues with sites rendering as expected? Such as, getting time out issues when navigating to the site's url?

This very well can be due to ports 80 and 443 not being fully opened.

With Cleavr.io, you can connect to your Oracle account and provision some of Oracle's free server options. Cleavr.io as part of the provision process will run some updates to ensure ports 80 and 443 are open.

However, if you are connecting to an Oracle server via the Custom Server option, then you'll need to manually perform some of these steps that Cleavr's Oracle intregration option does automatically.

Before we get into the steps of making port 80 and 443 work properly on an Oracle server, you may be wondering why Cleavr only integrates with some of the free server options and does not provide paid tier options. In short, we wanted to provide users with a free server option and Oracle in one of the few providers that offers a decent free server option. However, the experience to connect with Oracle accounts is very rough around the edges plus these oddities around port connections have led us to delay integrating with Oracle further until their experiences improve.

But, let's get back to the main issue. When you provision a server via Oracle's cloud interface, ports 80 and 443 won't be fully opened until you make the following updates.

Step 1: Add ingress rules

For this first step, you'll need to access your Oracle Cloud account.

Port 80 and 443 will be closed by default. Assuming you plan to add websites to the server, open port 80 and 443 by clicking on Virtual Cloud Network from the server instance details screen.

Click Security List on the left menu.

![setting up ports]((https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43y5fy5paah81vle9bh8.png)

Click on the security list

Click Add Ingress Rules

Add the following source and port -

Add the ingress rule for port 80. Do the same process for port 443.

At this juncture, you may be led to believe that ports 80 and 443 are opened. Afterall, you just set the ingress rule that opens up the ports.

Not so fast!

It'd be best and most expediant to scan the server ports to make sure that these ports are actually opened to the outside world.

We'll use Doneo.io's server port scanning tool to scan the server after making the above updates.

In the above, we can see that we still have some work to do to open up port 443.

Step 2: Modify iptables

For this step, we'll need to SSH into the server so we can run some terminal commands.

Run the following commands:



iptables -I INPUT 6 -m state --state NEW -p tcp --dport 443 -j ACCEPT
netfilter-persistent save

This will update the iptables to allow port 443. If port 80 was blocked after performing a port scan, then also run the above but swap out 443 with 80.

Now, run another server port scan to see if 443 is open.

We can see from the screenshot above from the Doneo.io port scan that 443 is now open.

Your http and https sites should now be accessible to the public.

Hopefully, this article saves you some time and stress as this can be a frustrating issue to resolve.

How to skip NGINX cache server wide

Adam Miedema — Fri, 23 Sep 2022 15:39:02 +0000

In Cleavr.io, you can enable NGINX cache or FastCGI (for PHP-apps) for any site as well as configure cache settings for each site.

The great thing about caching your sites is that your server can serve a page, or elements within a page, directly from a saved cache store as opposed to having to re-generate the whole page, or element, every time a request is made to view it.

This greatly increases the performance of your sites for your visitors since the server is able serve content quicker. However, you don't necessarily want everything to be cached and served to visitors directly from the cache store. This is especially true for more dynamic content, personalized content, and cookies.

If you find yourself adding the same cache settings for all of your sites, then you may consider configuring cache settings server-wide to avoid repetitive work and maintenance.

Here is how you can make that happen!

Step 1: SSH into your server

Cleavr.io doesn't have a server-wide NGINX Cache config section currently. But, Cleavr.io offers the tools to help get this done easily and securely.

The first step is to SSH into your server. If you have never SSH'd into your server before, then check out this guide to learn how to SSH into your Cleavr-managed servers.

Once you have SSH'd into your server, using the terminal, navigate to the NGINX conf.d directory.

cd /etc/nginx/conf.d

Step 2: Add cache config files

NGINX will automatically pick up and files in the conf.d directory that end with .conf. So, all we need to do is add a new file using the .conf extension.

You can add multiple config files and give them a descriptive name so you know what the config file is for. In fact, doing it this way may help you keep things more organized.

Let's add a couple of examples.

First, let's add a new file to exclude a path from being cached.

vim exclude-path-name-from-cache.conf

This will create a new file and then allow you to edit the file via vim. New to vim? Check out this guide on how to get started using vim.

For the contents of the configuration file, add the following:

if ($request_uri ~* "(/enter-path-here/)") {
    set $skip_cache 1;
}

Swap enter-path-here with the path that you wish to exclude caching for.

Save the file.

Second, let's see how we can skip a cookie from being cached.

vim exclude-cookie-from-cache.conf

Then, we can add something like the following to the new file:

if ($http_cookie ~* "enter-cookie-name") {
    set $skip_cache 1;
}

Swap enter-cookie-name with the name of the cookie you wish to exlude from cache.

Save the file.

Step 3: Restart NGINX

We're done with the terminal, so we can close that and go back to Cleavr.io.

Locate the server that the cache configs were created on, go to the Services section, and then restart NGINX.

That's it! NGINX will see the config files and will now refer to the new cache configs for all server caching operations.

I hope you find this guide useful! Please check out our other guides and blog posts in the Cleavr Slice.

How to get rid of unwanted access log entries

Adam Miedema — Wed, 21 Sep 2022 00:18:46 +0000

The NGINX access logs contains quite a lot of valuable information that helps provide insights into what content visitors are trying to access, how NGINX responds to the requests, and provides metadata about the visitor requesting the information.

This information is super valuable when it comes to managing your websites, keeping your users happy, and providing insights on how your setup can be fortified.

However, the logs can also easily get out of hand and get filled up with useless and undesirable information that makes it more difficult to scan logs for things that you're actually interested in. Some users even report Fail2Ban locking some of their site visitors out for misinterpreting harmless activity...

To filter out undesireable logs, we can leverage NGINX variables and apply an if statement to our logging directive.

We'll provide a couple of examples. One at the user agent level and another at the directory / file extension level.

In Cleavr, go to your Site > Site NGINX Config.


# Map user agent and filter out logs from known clients, such as WP Rocket or an uptime monitor

map $http_user_agent $loggable {
    "WP Rocket" 0;
    default     1;
}

# Map a request URI, check for extensions to ignore

map $request_uri $loggable {
    ~*\.(ico)$  0;
    default     1;
}

# Then, add the if statement to the logging directive
server {
    access_log /var/log/nginx/example.com-access.log    combined if=$loggable;
    access_log /var/log/nginx/access.log                combined if=$loggable;
}

In the above, we are defining a variable loggable. You can use whatever variable name you'd prefer. We're also assigning a 0 to criteria in which we do not wish to log, such as requests from 'WP Rocket' as well as requests being made for .ico extensions.

We hope this helps you get your access logs nice and tidy so that you can get the most use out of them without being distracted.

How to fix Laravel mixed-content errors

Adam Miedema — Tue, 16 Aug 2022 21:27:00 +0000

Did you deploy out your Laravel app behind a load balancer, and were expecting to see this?

But... you see this?

You've come to the right place!

Why is it happening?

Before we get into solutions, let's first quickly describe what's going on.

When you set up your load balancing solution, you'll have one server dedicated to directing traffic for incoming requests to other servers.

The SSL cert is applied to the load balancer server, but not to the target servers.

When the request for the site is being made, the request hits the load balancer and is encrypted with SSL at the load balance server. Internally, the load balancer is making another request to a target server. However, this request is being made over port 80, which terminates SSL. The target server then returns the request via http as https was terminated during internal communication.

So, that's basically it!

The target server just doesn't know that it needs to return the info using https. Because of this, mixed-content will be flagged and the site won't render correctly as assets are being provided over http instead of https.

This is also why you may be very confused if you first deployed out your Laravel app on a regular server and not behind a load balancer, where everything rendered how you'd expect.

Now, let's discuss a couple of ways to solve this issue.

Solution 1 - force URLs to 'https'

The first method is to simply tell your app that it needs to use https for URL creation when running in production mode.

In AppServiceProvider.php, we'll add some code to public function boot() to force URLs to https when the app is running in production mode.

// add this to the top of the file
use Illuminate\Support\Facades\URL;


// add this statement to public function boot()
if($this->app->environment('production')) {
    URL::forceScheme('https');
};

After making the above updates, deploy your app and then the mixed-content issue will be no more.

Solution 2 - Add load balancer IP to list of trusted proxies

The second solution is moreso the recommended solution per Laravel documentation, which is to add trusted proxy external IPs to a list of approved proxies.

To do this, we'll update the middleware via TrustProxies.php.

Locate the line protected $proxies; and update is as follow:

protected $proxies = [
        '1.2.3.4'  //replace with load balancer's public IP
    ];

After making the above updates, deploy your app and boom! No more mixed-content errors!

We hope this guide helps you if you're running into this, or a similar issue!

Want to learn more or have an idea for another guide? Chat with us on the forum.

For this example, we used a random Laravel example we found on GitHub by Chetans9 and forked it.

How to deploy a monorepo with Cleavr

Adam Miedema — Wed, 06 Jul 2022 00:16:55 +0000

Let's deploy a monorepo project with Cleavr.io!

In this guide, we'll use Strapi's demo application, Food Advisor.

This demo application has the following setup:

Front-end: React.js
Back-end: Strapi v4
Node version: v16
Database: SQLite - we won't need to setup a db server in this example

For this demo, I forked the Strapi repo strapi/foodadvisor; however, you should be ok to deploy directly from this public repo instead of forking to your account.

Step 1: Provision a server

In Cleavr.io, provision a new server. Since Strapi requires a little more juice to build apps during deployment, deploy a server with a couple of cores.

You may be able to get away with a 1-core server, but if during deployment you see 'JavaScript Heap Out Of Memory', then you'll either need to enable GitHub Actions or provision a more beefy server.

Step 2: Add Strapi backend site

Once you server is provisioned, add a new Strapi 4 site.

Make sure to set node version to 16 if Node has not already been installed on the server.

Also, make sure to set the port number to 1337. The app has this port hard coded, so we'll need to explicitly set it to 1337. Or, you can update the code to refer to the port assigned to the site.

Click Add to add the backend Strapi site to the server.

Step 3: Add NodeJS SSR frontend site

After the backend site completes installation, add the frontend site.

Since the frontend uses React.js / Next.js, we'll set the new site to NodeJS SSR.

Make sure to set the following configurations:

Entry Point: npm
Arguments: start
Artifact Path: .next

Click Add to add the frontend Next.js site to the server.

Step 4: Configure Strapi web app and deploy

Now that we have the frontend and backend sites on our server, we'll head to the Web Apps section to further configure the web apps and then deploy them.

Configure repository

In the web app section, click on the backend site and go to the settings > repo tab.

Select a GitHub version control provider and the set the following configs:

Repository: strapi/foodadvisor
Branch to deploy: master
App Folder: api

Click Update to save settings.

Configure env variables

Next, head over to the Environment tab and add the following variables:

HOST=0.0.0.0
PORT=1337
STRAPI_ADMIN_CLIENT_URL=http://your.backendurl.here
STRAPI_ADMIN_CLIENT_PREVIEW_SECRET=ARNFCb9zrC9ZHm5hZzCigWivD40icS4s

Leave url as 'http', using 'https' will break it.

Click Sync to save.

Add seed db deployment hook

Next, in the deployment hook section, add a new deployment hook that will seed the db.

Create a new hook, add a title, and then fill in with the following:

cd {{ releasePath }}/api
yarn seed

Place the hook directly after the build hook.

Deploy

Time to deply!

Go to the deployment tab and deploy out the backend.

Step 5: Configure NodeJS SSR web app and deploy

Let's now configure the frontend web app.

Configure repository

In the web app section, click on the frontend site and go to the settings > repo tab.

Select a GitHub version control provider and the set the following configs:

Repository: strapi/foodadvisor
Branch to deploy: master
App Folder: client

Click Update to save settings.

Configure env variables

Next, head over to the Environment tab and add the following variables:

NEXT_PUBLIC_API_URL=http://your.backendurl.here
PREVIEW_SECRET=ARNFCb9zrC9ZHm5hZzCigWivD40icS4s

Leave url as 'http', using 'https' will break it.

Click Sync to save.

Deploy

Time to deply!

Go to the deployment tab and deploy out the frontend.

Step 6: Check out the Food Advisor site!

Now that the backend and frontend have been deployed, visit the frontend URL and you should see the Food Advisor website! 🎉

Getting started with Nuxt3 or Content2? Start here!

Adam Miedema — Wed, 01 Jun 2022 02:48:29 +0000

Nuxt v3 is getting more and more mature every week. Though Nuxt3 is still technically in Beta, you've probably been itching to migrate over or start new projects from scratch using Nuxt3, especially to take advantage of Vue3 and even Tailwind v3 if you're a Tailwind-buff.

Check out the Nuxt3 road map to see what they're working on next!

On the Cleavr.io side, we've increasingly seen more users deploy out Nuxt3 apps. AND... We've also been receiving some support around Nuxt3 deployments.

Because of the increasing popularity amongst our users, as well as because we've been working on a sister project for Cleavr, Feedmas.com, We decided to utilize Nuxt3 for Feedmas's marketing site. We were also thrilled to see that Nuxt/Content v2 also recently was released, and is compatible with Nuxt3, so of course had to get rolling on that new goodness as well!

After working with the new candy 🍬 from Nuxt and Content, as well as with common Nuxt3 deployment issues we've fielded at Cleavr, we wanted to provide a couple tips to get your started with your own Nuxt3 and Content2 projects!

Get started quickly with a Nuxt3 starter

One of the first places you'll go to get started with Nuxt3 is likely their Quick Start Guide. We definitely recommend reviewing this guide, especially as it is sure to be updated often in the coming days.

Though, the install wizard output may leave you wondering exactly what to do next. If you know what stack you want to start with, we recommend searching Github for some Nuxt3 starter templates. This is just to get you up and running a little bit quicker. However, don't just fork any-ol project. Be sure to review the repo to see what exactly it is you'd be installing and avoid anything suspicious.

Installing Nuxt/Content 2

Installation is easy and pretty straightforward in the Nuxt/Content Get Started Guide.

Assuming you've started with an existing project, all you have to do is (using yarn, npm and pnpm are also available):

yarn add --dev @nuxt/content

And then add the module to your nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
})

We didn't run across any issues with this part of process. It was all as smooth as butter. 🧈

Using Nuxt/Content2 basic tips

These are probably very painfully obvious tips:

Read the guide it is sure to change and is full of helpful guidance
The catch all slug is pages/[...slug].vue - be sure to name your page this if using the <ContentDoc> component. We missed this initially and took a couple rounds of looking at the docs before realizing the mistake.
<ContentDoc> is pretty awesome. Like seriously awesome. This will automatically locate the /content/doc-name.md file based off the slug (page URI) - no need to have a fetch script! 🎉 Though, we did run across some URI case sensitivy issues. So, you can explicilty call a markdown page by adding the path. For example: <ContentDoc path="/guide">

Tailwind Typography

We also added Tailwind Typograpgy to our project. If you're using Nuxt/Content, we highly recommend installing Tailwind and the Typography plugin to style your converted markdown.

One of the cooler things we just wanted to point out with Typography, is that now you can easily define styles inline for prose.

Check out the list of modifiers here and be relieved. 😅

Nuxt3 deployment tips

Cleavr recently released some enhancements, including improved support for Nuxt3 and NodeJS 16 deployments. You can read more about the goodies here.

However, there are some issues that we've experienced while deploying Feedmas.com that we've also seen some of our users come across during their own deployments of Nuxt 3.

The symptoms are typically memory leaks and high-utilization of the server's processors. We've also see some build and activation failures.

The main tips that we have for deployments that seem to have resolved the majorirty of Nuxt3 deployment issues are:

Make sure all of your dependecies are up-to-date
If you are using one of the various Tailwind modules, add them to the build > transpile list in nuxt.configs.ts

For example:

build: {
        transpile: ['@heroicons/vue', '@headlessui/vue', '@tailwindcss/typography'],
    },

We hope that you find these tips helpful if you are using Nuxt3, Nuxt/Content2 and have ran into similar issues.