Web App Template for Beginners

Start with this one. Learn to build a local web app that you can modify in your future projects.

Background

To put it simply, each web app has a frontend and backend. Frontend is usually for UI and design and runs on browser, on user’s own computer. P5.js sketches are frontend.

Backend is behind-the-scenes code that runs on server. It is stores and organizes data and delivers your app to users, ie. clients. If 10 people access your website, there are 10 frontends in action but only 1 backend.

Backend is often built with Node.js or Python. Here we use Node.js. Time to code!

Steps

1)Get a code editor if you don’t have one yet. I like [Visual Studio](https://code.visualstudio.com/(https://lab.arts.ac.uk/loading.gif#uploadimage-da8a47fd51722)

2)Create a folder for your project on your laptop. For example, a folder called “example_app” in you Documents folder.

3)For Visual Studio: Open example_app folder and create a following file setup by clicking folder and file icons: (https://lab.arts.ac.uk/loading.gif#uploadimage-dad899cd17b4a)