How to set up your first Noodl open source app building project
Вставка
- Опубліковано 8 лип 2024
- In this video, I'll show you the complete newbie's guide on how to set up the Noodl open source low-code app builder locally on your computer, with the optional cloud services backend.
I'll then show you how to take that project into production with a Github repo and web hosting using AWS S3 static website hosting and AppRunner.
DOCKER PROTIP: I forgot to mention data persistance. The docker-compose.yml file already contains a MongoDB “volume” which will write a data store outside your docker container to protect the data even if a container gets deleted by accident. If you’re running multiple project backends, you’d want to rename the ‘mongodb-data’ part for each project. For example ‘projectA-data:/data/noodlapp-db’ Just make sure you take note of these details in case you need to remake a container, so you’ll start with the same data as before.
I'm Richard Osborne, professional web app developer. I've been building using no-code and low-code tools for clients and personal projects for many years now. Subscribe to my channel for more useful videos and tutorials exploring the tools I use to build web and mobile applications.
P.S. Want me to build your project for you? I've like totally got an agency and whatever! digitalbricks.io
-----Contents-----
00:00 Intro
01:42 Set up the Noodl back end
08:30 Set up the Noodl editor
11:44 Connect to the back end
16:02 Pushing your project to Github
20:49 Publishing your app using AWS
26:26 Setting up a cloud back end in AWS - Наука та технологія
Thanks for the video Rick, easy to follow and understand. Keep up the good work!!
Thanks Mizanur, I’ll keep making videos as long as Noodl remains the best tool for making web apps, so probably for a very long time 😉
Thanks! Super helpful!
Glad it helped!
Awesome!!
very nice!
Thanks!
Thanks!
Welcome!
I love so much to this video. ❤❤❤
Glad you liked it Kevin! I'll make more ;)
@@simple-rick-tutorials Yes please
Hi thank you so much for the step-by-step guide on setting up Noodl! Near the end of the tutorial you showed us how to set up the production backend. I followed to that point but found that the dashboard for the production backend is blank. It seems to be a permission issue. The AppRunner is not able to reach MongoDB Atlas. Is there an IP I can use to allow in MongoDB Atlas or should I allow traffic from all IPs?
Hey Zack! Sorry for the wait. I hope you’ve already got the problem sorted but just in case: The solution would be to set up the IP access on Atlas as you said, instead of allowing 0.0.0.0 aka open access. The issue is I’m not sure AWS app runner gives you a fixed IP for the container. It looks like the solution is using an AWS VPN to set a static IP for outbound traffic aws.amazon.com/jp/blogs/aws/new-for-app-runner-vpc-support/
Thanks Richard, just watched this again to set up remote hosting. Do you have any advice/a different guide for people who want to understand more about the security implications of what they untick to keep this process simple / how to set up a more secure hosting environment?
Hey! I take it you mean with AWS? I’m afraid I’m not an expert, especially with hosting environment security, beyond the standard stuff. I’d recommend consulting the mega brain ChatGPT or Claude 3, or looking at some more in depth AppRunner tutorials
@@simple-rick-tutorials yeah AWS, ok cool thanks for the reply. Want to avoid building something that is horribly hackable!
Super video Richard, thanks for your efforts. If someone wanted to get a good grasp of the overall process of bringing a project from concept to production, is there a learning path you would recomend? I dont believe it needs to be noodl specific so was considering the IBM full stack developer professional certificate on Coursera, put perhaps that is overkill? Would be grateful to hear your thoughts.
Sounds like you’re describing the role of a Product Owner. I’ve had a look around Coursera and this one looks pretty good: www.coursera.org/professional-certificates/ibm-product-manager
Hey Rick! I'm having trouble setting up my git repo. I've set everything up similar to you, but I keep getting this error message: "fatal: ambiguous argument 'HEAD~': unknown revision or path not in the working tree." Any reason as to why this might be?
Hey Mohammed! Hmm that’s strange. Can you join the Noodl discord and DM me with some screenshots? You’ll find me as “Richard Osborne” in the Noodl Discord
Hi Richard,
Thank you for a great video. Even a noob like me could understand pretty much all of it.
Unfortunately I am currently stuck at the github part of the guide. It does not seem to upload the project files. I am trying to run a project which I made in Noodl 2.9.2.
Is it because I need to do some kind of migration first?
Again, thank you for a great video.
Hey Mads. I’m glad you found the video useful! Yes there’s a problem with migrating 2.9.2 projects to GitHub. I’m working on a guide at the moment on how to migrate existing projects manually using Terminal / Command Prompt and the standard git commands. It should be available this week so keep an eye out!
what do you think in comparison with Appsmith and Budibase ? Thnaks
AppSmith at the moment is for building internal tools / dashboard apps and requires a lot of coding to connect it with a back end. Noodl allows you to do the same coding if you want, but with prefabs and cloud nodes you don’t have to. Budibase same issue, more for internal tools, data visualisation, that kind of stuff. Noodl is for building public facing PWAs, like online stores, learning platforms, mobile apps, etc.
This was helpful, but honestly I'd rather see a start-to-finish tutorial that was better scripted and didn't involve watching you hunt around for what to do next. Don't get me wrong, I appreciate what you've done here. What this video showed me is that yes, it's possible to do this stuff on your own, but that I'd rather pay someone a monthly fee to host it. Navigating the waters of all the "go here, sign up for that, do this thing, hold your tongue to the left..." business makes me weary.
I can understand that. There’s a vast gap between tools like Bubble, WeWeb etc. that offer managed hosting, and pure open source low code tools like Noodl. If you join the Discord you’ll see that there are projects being set up by some community members to provide managed one click hosting. I hope you find what you’re looking for!
Hi! It is possible to use some api's for app from whatever php backend i create? And i can deploy the noodl app to my appache basic shared hosting? Since i use this for a very basic project i want to keep everything simpler for now.
Hey! Sure you can use APIs for your PHP backend, in as much as Noodl uses plain Javascript to make HTTP requests from the browser. So as long as your endpoints are correctly set up in your server, you can add standard Javascript functions to Noodl to call the back end.
As for Apache, sure you can point your Apache server to the 'index.html' file that Noodl generates when you deploy a project. It's fairly similar to a standard React project, just with some Noodl magic to render the elements once the index page is loaded.
@@simple-rick-tutorials Thank you for the answer, I've been searching for something like Noodl for a while now. I was weighing it against Wappler, given my extensive PHP background. But Noodl just seems to offer a faster, smoother building experience. It's like it's designed to make development lightning-quick and hassle-free. Excited to dive in and see how it speeds up my workflow! Great content, i will watch all your videos! :))
awesome , does it work on Linux ?
It sure does but only building from source at the moment. There are talks in the Discord community about building an installer for Linux but it’s not done yet