This is a tutorial, walking through how to set your app with Nue.js
By the end of this tutorial, we will have a blank application, without any unnecessary packages, ready for you to create an application using Nue.js
This will be part of a series we'll go deeper into what you can do with Nue.js and show practical tutorials
What's Nue.js?
Nue.js is a framework, that tries to simplify how applications are built and improve performance, by allowing the usage of faster languages so you are not limited by the typical performance of a JS application
From their docs:
| Nue is a web framework that prioritizes web standards, enabling developers to create large-scale single-page applications (SPAs) with less code than mainstream tools require, and your codebase stays clean so it is easier to maintain and scale.
https://nuejs.org/docs/single-page-apps.html
After trying Nue.js, I can say this is a JS framework with good ideas. It creates very light bundle sizes, provides server-side rendering, allows writing application logic in Rust, Go or Zig for performance-critical tasks. Its model-view-controller (MVC) architecture can help maintain a structured development
Requirements
To install Nue, you must first have Bun installed in your system
Install Bun
To run Nue.js we will use Bun
curl -fsSL https://bun.sh/install | bash
You can use npm, yarn or pnpm too, for more info check https://nuejs.org/docs/installation.html#node-setup
Setting the project
Now we need to create a folder to store our code,
mkdir nue-app
(Optional) Start an empty Bun project
Then cd into your new folder and run the command
bun init to create your base application, you will see this prompt:
? Select a project template - Press return to submit.
❯ Blank
React
Library
Choose Blank and once bun finishes setting up your project, your root folder should look like this:
$ ls
bun.lock index.ts node_modules package.json README.md tsconfig.json
Install Nue.js locally
Now run the command
bun install nuekit to install Nue.js in your project
Create a site.yaml and index.html
In the root of your application, create a site.yaml and index.html. The site.yaml file will tell Nue how to bundle and run our application while index.html will be the root view of our application
title: Nue CRM / A single-page app demo
port: 8083
<h1>Hello World</h1>
Run the app in development
Now you can run your Nue.js application, using the command:
bun nue and that's it
You should be able to see your application on localhost:8083 and now you can start developing
NOTE
If you want to get a sample application running and skip this entire tutorial, just run:
bun nue create simple-blog to create a blog sample or
bun nue create simple-mpa to create a multipage sample app, with login and dashboard
In case you want to create and deploy a Nue.js application with ease, try Diploi's Nue.js component, so you can have your app live online in seconds
https://diploi.com/component/nue
Closing thoughts
I initially planned to make this into a single blog post, but after 3 days of trying to make sense of my experience learning Nue.js to make this blog, I realized that I was being naive and wouldn't be possible, so I split it into multiple parts
This is just an introduction to Nue.js and in our next entry, we'll go over setting up the folder structure and logic for our application
If you prefer to take the lead, check Nue's documentation about how to use Nue with content-driven applications and single page apps
We are working on new components, UX improvements and we'll be posting an update soon!
Happy building! 🫡
Try Diploi for free ✨
References: