Logo

Using frameworks

JDoodle provides an environment for creating & running apps directly in your browser.

To use frameworks, you’ll only need a JDoodle account. If you don’t have one, please sign up here and a basic working knowledge of different frameworks. Here’s how you can use different front-end and backend frameworks on JDoodle.

React

Go to the JDoodle React IDE. After you open the React IDE, wait for the environment to set up and load; it should take a few minutes only.

Type your code

You’ll find a basic project structure in the editor with App.jsx, main.jsx, index.html, and other configuration files. You can start coding directly in these files. For a simple example, replace the contents of App.jsx with the following:

import React from 'react';

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Hello, React on JDoodle!</h1>
    </div>
  );
}

export default App;

Installing Packages

If you need additional npm packages, add the package to your code, click Install, and wait for the package to be added to package.json. For example, to install react-toastify, add it to your code and click Install Packages.

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const showToast = () => toast("Merry Christmas from JDoodle!");

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Hello, React on JDoodle!</h1>
      <button onClick={showToast}>Show Toast</button>
      <ToastContainer />
    </div>
  );
}

export default App;

Running your code

  1. Click the Execute button to build and run your React application.
  2. Depending on your screen size, the preview pane on the right (or below) will display your app’s output.
  3. If you change the code, click Execute again for the updated result in case you don’t see the real-time changes.

Project structure overview

File/| Folder | Description | |------|-----------| | package.json | Contains the list of dependencies your project needs. | | Add or remove packages to package.json and then click Install Packages to update them, similar to running npm install. .eslintrc.js | Defines linting rules and coding standards. | | Adjust this file if you need a specific coding style or want to enable certain rules. index.html | Serves as the root | | HTML file. React will inject your app’s content into this file, usually into a with id=“root”. Typically, you won’t need to edit this file unless you want to modify the basic HTML structure of your app. main.jsx | The entry point for the | | React application, responsible for rendering App.jsx into the HTML. It often includes the following code: App.jsx | The main component of your | | Contains static files that can be served directly, such as images or icons. src | Holds the main code for your |

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Flask

Go to the JDoodle Flask IDE.

Type your code

You’ll see a file structure for a Flask application including __init__.py, routes.py, and a templates folder. Start by editing your Flask routes in routes.py:

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html', message="Hello from JDoodle & Flask!")
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

Update index.html in the templates folder if you want to customize the UI:

<!DOCTYPE html>
<html>
<head><title>Flask on JDoodle</title></head>
<body>
  <h1>{{ message }}</h1>
</body>
</html>

Install packages

If you need extra Python packages, add the package (e.g., requests) to your code and click Install packages.

Run your code

Click Execute to start your Flask server. Once it’s running, the preview pane will show your application’s output. If your app is interactive or needs user input, you can open it in a new tab if provided.

Project overview

File/| Folder | Description | |------|-----------| | init.py | Initializes the | | Flask application. Often sets up app = Flask(name) and may configure extensions. routes.py | Contains your route definitions (@app.route(’/’)) and logic for handling | | HTTP requests. templates/ | Stores | | HTML templates rendered by Flask’s render_template function. static/ | Contains static files ( | | CSS, JS, images) served directly to clients. .flaskenv | Used to set environment variables like | | FLASK_APP. Pipfile | Used by pipenv to manage dependencies. |

Spring Boot

Go to the JDoodle Spring Boot IDE.

Type your code

In JdoodleProjectApplication.java, you’ll see the main class of your Spring Boot app. Add a simple REST controller in a new file under src/main/java/com/jdoodle/:

package com.jdoodle;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
    @GetMapping("/")
    public String hello() {
        return "Hello from JDoodle & Spring Boot!";
    }
}

Install packages

For Java, Maven handles dependency management via pom.xml.

  1. Manually add them to pom.xml and click Install Packages to update.
  2. Once installed, your code can use those dependencies.

Example (adding a dependency in pom.xml):

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
  <version>3.0.0</version>
</dependency>

Run your code

Click Execute. Once the application starts, the preview pane will show your app’s response.

Project overview

File/| Folder | Description | |------|-----------| | pom.xml | Maven configuration file that specifies project dependencies, plugins, and build instructions. | | It manages the project’s build lifecycle and dependencies. JdoodleProjectApplication.java | The main entry point of the | | Configuration file for setting application properties such as server ports, database connections, logging levels, and other environment-specific settings. src/main/java/ | Contains the | | Java source code for the application, including controllers, services, repositories, and other components that define the application’s logic. src/main/resources/ | Holds static resources, |

Express.js

Go to the JDoodle Express.js IDE.

Type your code

In app.js, set up a basic Express server:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from JDoodle & Express.js!');
});

module.exports = app;

Usually, the bin/www file starts the server:

# bin/www
const app = require('../app');
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Express app listening on port ${port}`);
});

Install packages

  1. Manually add npm package you need (e.g., axios).
  2. Click Install to add it to package.json.

Example of adding a package to your code:

const axios = require('axios');
// Now you can use axios within your routes

Run your code

Click Execute. The server will start, and the preview pane will display your endpoint’s output.

Project overview

File/| Folder | Description | |------|-----------| | app.js | Contains the main application logic, including | | Express setup, middleware configuration, and route definitions. This file initializes the Express application. bin/www | Responsible for starting the | | HTTP server. It binds the Express app to a specified port and handles server-related configurations and startup processes. routes/ | Directory that defines route handlers. | | Files like index.js and users.js contain the logic for handling different HTTP requests and endpoints. views/ | Stores | | HTML templates (e.g., index.ejs) used for server-side rendering. This folder is utilized if you choose to implement a template engine for dynamic content generation. public/ | Contains static assets such as | | CSS files, JavaScript files, and images. These files are served directly by Express to the client without any server-side processing. package.json | Manages |

Vue.js

Go to JDoodle’s Vue.js IDE. After opening the Vue.js IDE, allow a few minutes for the environment to initialize and load.

Write your code

The editor provides a basic project structure, including App.vue, main.js, index.html, and other configuration files. Begin coding directly within these files.

<template>
  <div id="app">
    <h1>Hello, Vue on JDoodle!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

Installing Packages

If you need additional npm packages, add the package to your code and click Install Packages to update package.json, similar to running npm install. Example: Installing**vue-router**

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

Running your code

Click the Execute button to build and run your Vue application. The preview pane will display your app’s output. If you change the code, click Execute again to see the updated results.

Project overview

File/| Folder | Description | |------|-----------| | package.json | Contains the list of dependencies your project needs. | | Add or remove packages to package.json and then click Install Packages to update them, similar to running npm install. vue.config.js | Optional configuration file for customizing the | | Vue.js build setup. index.html | Serves as the root | | HTML file. Vue will inject your app’s content into this file, usually into a with id=“app”. Typically, you won’t need to edit this file unless modifying the basic HTML structure of your app. main.js | The entry point for the | | Vue application, responsible for initializing Vue and rendering the main App.vue component. App.vue | The main component of your | | Contains static files that can be served directly, such as images or icons. src/ | This folder holds the main code for your |

Laravel

Go to JDoodle Laravel IDE.

Writing code

You’ll see a file structure for a Laravel application, including artisan, routes/web.php, and a resources folder. Begin by editing your Laravel routes. Example: Basic Route in routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome', ['message' => 'Hello from JDoodle & Laravel!']);
});

Customizing views

Update resources/views/welcome.blade.php to customize the UI:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel on JDoodle</title>
</head>
<body>
    <h1>{{ $message }}</h1>
</body>
</html>

Installing Packages

If you need additional PHP packages, add the package to your composer.json and click Install Packages to update them, similar to running composer install. Example**:** Installing **guzzlehttp/guzzle**

{
    "require": {
        "guzzlehttp/guzzle": "^7.0"
    }
}

Running your code

Click the Execute button to build and run your Laravel application. The preview pane will display your app’s output. If you change the code, click Execute again to see the updated results.

Project overview

File/| Folder | Description | |------|-----------| | artisan | The command-line interface included with | | Laravel, used for running tasks and managing the application. composer.json | Manages | | PHP dependencies for the project. Add or remove packages to composer.json and then click Install Packages to update them, similar to running composer install. routes/web.php | Defines web routes for the application. | | Use this file to set up route definitions and handle HTTP requests. resources/views/ | Contains | | Blade templates for the application’s views. Modify these files to customize the UI and layout of your Laravel application. public/ | Holds the front controller (index.php) and assets that are publicly accessible, such as | | Stores configuration files for various services and components used in the application. storage/ | Contains compiled |

Troubleshooting tips

  • Verify package names and reinstall if necessary. Refer to official documentation for compatibility.
  • Check the console for errors, ensure your code follows proper syntax, and confirm all components are correctly imported.
  • Make sure HTML elements match your code targets and that components are properly structured.

If you encounter any other issues or have questions, feel free join our JDoodle Community for discussions, troubleshooting, and share.

Previous Topic ← Using databases
Next Topic Input & output →