Why Low-Code is Changing the Game
A few years ago, starting a front-end project meant wading through a swamp of configurations, dependencies, and unpredictable integrations. Even using the same framework from one year to the next didn’t guarantee you’d have the same ease of setup—or any ease at all. Between frameworks changing their default approaches and libraries getting deprecated, simply standing up a front-end project could feel like a battle against an ever-growing pile of dependencies.
If you've been there, you're not alone. Dependency hell and configuration fatigue have led many developers, myself included, to question whether traditional methods of front-end development are still worth it. This led me to explore low-code solutions—platforms that promise to take the headache out of project setup by cutting down the time spent on configuration and letting us focus on what we actually want to build.
After some initial skepticism, I found that tools like Netlify and Decap CMS offer a compelling alternative. These platforms streamline front-end development by providing pre-configured environments and stable integrations—without the dependency nightmare. In this post, I’ll walk through a simple project setup using these low-code tools, showing how you can deploy a front-end UI with minimal effort and maximum reliability.
If you’re interested in my thoughts on why low-code solutions are here to stay, check out this post
Getting a Front-End UI Up, Running & Deployed Quick... for $0
Oftentimes, when starting a front-end project, I feel like I spend too much time getting a UI up and running. Between using npx or create-app tools and debugging dependency compatibility issues, the process can be frustrating.
I work primarily on the backend, so when I turn my attention to the front end, I’m always hoping it goes as smoothly as it does on the backend. But typically, it doesn’t.
This led me to explore different templates, hoping to find something more reliable for future projects. I initially stumbled upon Gatsby.js (which might not be deprecated yet, but probably should be to save developers’ time), and through Gatsby, I discovered Netlify and eventually Vercel. What began as a complicated process turned into a solid solution, especially after I found the right combination of tools.
Now, let’s walk through setting up an app on Netlify:
Step 1: Navigate to Netlify
It’s free. Head over to Netlify, and find the "Add New Site" button.
Step 2: Start from a Template
Click the “Start from a template” option. For this demo, let’s use the Bejamas Next.js template.
Step 3: Clone the Project to GitHub
Click “Use Template” to clone the project to GitHub, go through the prompts, and connect to your GitHub account.
Step 4: Deploy
After linking your project to GitHub, deploy the site with just a few clicks.
That’s It, Go Ahead and Deploy
Step 5: Open Your New Blog
Click the “Permalink” or “Open Production Deploy” button to view your new blog.
Step 6: Setting Up a CMS
You’ll notice this template is a blog. Netlify integrates with several platforms to manage content, so let's set one up. Head over to GitHub and clone your project using:
Next, Navigate To Github & Clone Your Project
git clone git@github.com:[your-repo]/[your-project-name].gitStep 7: Webpack Configuration & Admin Setup
Create the necessary directories and configuration for Decap CMS, then configure the admin panel.
Create Webpack config
touch webpack.config.jsInsert in to it:
const path = require('path');
module.exports = {
entry: './public/admin/index.js',
output: {
path: path.resolve(__dirname, 'public/admin'),
filename: 'cms.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
mode: 'development', // or 'production'
};Update Scripts in package.json
- The main thing is that you want your CMS to build when it is needed.
"scripts": {
"dev": "next dev",
"build": "npm run build:cms && next build",
"build:cms": "webpack --config webpack.config.js",
"start": "next start"
},Create to Your Site’s /admin Path
Now, navigate to your site’s /admin path (note: this doesn’t work locally). You'll be able to start using Decap CMS from here.
Create admin panel directories
mkdir -p public/adminAdd Markdown to your public/admin/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<title>Content Manager</title>
</head>
<body>
<script src="./cms.js"></script> <!-- Use the bundled CMS file -->
</body>
</html>Add A Config For Decap CMS
The main thing is the folder, this is directed from the root of your project to your markdown files/blog posts. The second is the fields, these are the key-value pairs in your metadata of your markdown files. This is everything between the three hyphens ---.
backend:
name: git-gateway
branch: main # The branch to update, default is 'main'
media_folder: "static/img" # Folder for uploaded media
public_folder: "/img" # Path to media folder
collections:
- name: "posts" # Name of the collection
label: "Posts" # Label for the collection
folder: "content/posts" # Folder where posts are stored
create: true # Allow creation of new posts
slug: "{{slug}}" # Slug format
extension: "mdx" # Format for posts
format: "frontmatter" # Formatting library
fields: # Fields for the content type
- { label: "Title", name: "title", widget: "string" }
- { label: "Body", name: "body", widget: "markdown" }
- { label: "Description", name: "description", widget: "string" }
- { label: "Publish Date", name: "date", widget: "datetime" }
Add JS to your public/admin/index.js
This is the file that will be grabbed by webpack, bundled, and inserted into your public/admin/index.js.
I've seen another approach to handling this, but this is what I am doing:
import CMS from "decap-cms-app"; // Import the CMS
CMS.init();Update the src/pages/_app.js
This will load up on every page load; for my use case, this is fine. This library is needed to complete user registration and password resets. There are alternatives to this approach.
import '../styles/globals.css';
import 'prismjs/themes/prism-tomorrow.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
// Dynamically load the Netlify Identity script
const script = document.createElement("script");
script.src = "https://identity.netlify.com/v1/netlify-identity-widget.js";
script.async = true;
document.body.appendChild(script);
// Initialize Netlify Identity after the script is loaded
script.onload = () => {
if (window.netlifyIdentity) {
window.netlifyIdentity.on("init", (user) => {
if (!user) {
window.netlifyIdentity.on("login", () => {
document.location.href = "/admin/";
});
}
});
}
};
}, []);
return (
<>
<span className="theme-bejamas" />
<Component {...pageProps} />
</>
);
}
export default MyApp;Previously I Tried Other Approaches to Help You Save Some Time
Here are 2 examples of what didn't work:
Trying to wait for DOM-based events to load prior to the initialization of DecapCMS did not work.
<html>
<head>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<title>Content Manager</title>
<script src="https://unpkg.com/decap-cms@3.0.0/dist/decap-cms.js"></script>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function() {
window.CMS_MANUAL_INIT = true; // Optional if you're manually initializing
window.initCMS = function() {
if (CMS) { // Check for CMS directly in the global scope
CMS.init();
} else {
console.error("CMS is not defined.");
}
};
// Call the initialization function
window.initCMS();
});
</script>
</body>
</html>Neither did adding the relative file from the public/admin/ directory
<script type="module" src="./index.js"></script> <!-- Include your JavaScript file -->Step 8: Navigate to Your Site’s /admin Path
To manage users, navigate to your site’s Netlify dashboard, enable Identity, and set up the Git Gateway.
Ok, now navigate to your site to the /admin path (this doesn’t work locally).
Step 9: Set Up Netlify Identity and Git Gateway
To manage users, navigate to your site’s Netlify dashboard, enable Identity, and set up the Git Gateway.
Now we have to set up registration via Netlify.
You’ll want to navigate to your site configuration and click Identity. This is a situation where the UI looks a little different before you enable it and changes after you do.
When you click Identity, you’ll be prompted to enable and get other options.
Then go down to ”Services”, which can be found under “Identity”, here you will find your Git Gateway. Enable it.
Navigate Back to Your Site to the /admin Path
Step 10: Register and Confirm
Once enabled, go to your /admin page and register. You’ll receive a confirmation email. After confirmation, you’ll be taken to the login page.
You’ll get a confirmation email sent to you:
Confirm the email and you’ll be taken to the login page.
Once you’re registered, I recommend going in and closing it:
That’s it! Go back to your login page:
Congratulations, you have your own blog & it didn’t cost you anything. Not a domain, not hosting, no paying for a CMS.
Conclusion: Embracing No-Code/Low-Code for the Future of Development
As the challenges of modern software development become more intricate, the rise of no-code/low-code platforms offers a promising alternative. These tools are transforming how businesses and engineers approach building applications, reducing the burden of managing dependencies and configuration while enabling faster time to market.
By adopting no-code/low-code solutions, teams can focus on delivering real value instead of getting bogged down by technical hurdles. With their stability, reduced cognitive load, and out-of-the-box integrations, these platforms are not just simplifying development but reshaping how we think about creating scalable applications. As the tech landscape continues to evolve, no-code/low-code is here to stay, offering a pragmatic solution for today’s fast-paced digital world.