I want to build schema file from my frontend app just like what happens in cube.js playground in dev mode.
Is there any possibility to do so?
Cube.js is meant to be used as a backend analytics API layer, that's why you should run it separately from your front-end project.
The general workflow is:
Setup cubejs backend project, and connect it to your data source.
Create js files in your cubejs project in the schema folder and define cubes that fit your use case. Follow the guide at cube.dev on how to create cubes
├── package-lock.json
├── package.json
└── schema
├── file_with_cubes.js
├── file_with_cubes2.js
├── file_with_cubes3.js
Setup front-end project with cubeJsClient library to be able to talk to cubejs backend. check front-end integration docs
Use your query format of choice with cubeJsClient on the front end, to query cubejs backend and get results.
You will get the result from API call, [manipulate it] then visualize it.
Related
I've already gotten my fair share of Bootstrap and Django but never tried out other frontend frameworks like Angular, React, etc. and finally wanted to try SvelteKit. So I'm really inexperienced and new with this sort of stuff.
Currently I've already set-up my Django project as well as a SvelteKit project by following the tutorial on their website.
My problem is that I'm confused about how to combine Django and SvelteKit now. Do I just run both servers simultaneously on different ports and get the data from Django JSON APIs into my Svelte frontend or is there some kind of approach to this? I thought that maybe there's a way to get my Django app to render the Svelte files from the Svelte server for me. I just feel really lost at the moment so if anyone could help me or has some resources I could read to get more familiar with the topic, since I didn't find a lot online, that'd be great!
Many thanks in advance!
First, understand the difference between Svelte and SvelteKit. SvelteKit is a front-end + server solution that is a layer above vanilla Svelte. SvelteKit adds things like routing and support for sever(less) functions.
If you want to use Django for all your server-side processing, you should just use (vanilla) Svelte to write independent web components that you call from html served by Django. No need to use SvelteKit if you aren't using any of the extra framework features.
How to write a web component with vanilla Svelte
How to write a web component with SvelteKit.
If you want to just write your API's in Django and do everything else from SvelteKit, I would run both Django and SvelteKit servers from different subdomains and/or ports. Like django.example.com and kit.example.com or example.com:8000 and example.com:3000.
SvelteKit also provides a low-level handle() hook that can bypass SvelteKit, but usually JS/node.js is still used. I think it would be tricky to pass a request from SvelteKit to Django.
I find myself having the same question, it's not perfect but I got it to work with the following:
Create a directory that will contain everything, e.g. my-project
Inside the directory create your Django project, e.g. django-svelte, with django-admin startproject django-svelte
From my-project/django-svelte create an app to contain the svelte app, e.g. frontend, with python manage.py startapp frontend
Inside frontend create two subdirectories templates and static; inside each of them create a frontend directory. (You should have frontend/templates/frontend and frontend/static/frontend in the end)
Inside my-project initialize a svelte-kit project, e.g. client, with npm init svelte client
Inside client install all packages and add #sveltejs/adapter-static with npm install and npm i -D #sveltejs/adapter-static
Replace the content of svelte.config.js with:
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
paths: { base: "/static/frontend" }, // Adjust according to where you collect static files and the name of the Django app
adapter: adapter({
pages: '../django-svelte/frontend/templates/frontend', // Adjust according to the name of the Django app
assets: '../django-svelte/frontend/static/frontend', // Adjust according to the name of the Django app
fallback: null,
precompress: false
}),
prerender: {
// This can be false if you're using a fallback (i.e. SPA mode)
default: true
}
}
};
This will write your HTML, JS and CSS files inside the frontend app.
Create a build with npm run build
Collect static files in Django with python manage.py collectstatic
Run Django with python manage.py runserver or other servers
I'm sure there are simpler ways though :-)
I made a simple template for svelte and django. please check this link: https://github.com/Pei2tech/svelte4django. What you need to add routing to support svelte instead of using sveltekit.
I want to create a Django based backend providing an API using django-rest-framework only. The admin interface is the only visual interface I need for end users. The API shall be used by/integrated with a JS frontend. The backend consists of several parts like configuration, visualization, etc. According to design best practices I'd first create a Django project my_project with django-admin startproject my_project . and add an app per part with python manage.py startapp configuration, python manage.py startapp visualization, etc. (In the django-rest-framework quickstart there is generated one Django app.)
To me it's not clear how I have to adopt the Django design best practice of using apps to RESTful API based JS frontend integration. In case I want to integrate the backend with a JS frontend how should I structure my codebase? Should I create apps configuration, visualization, ... (I don't create template based views) and define corresponding models with a single RESTful API. Where should I place the API sources w.r.t. project structure? How should I map the API to models?
DRF extends Django views and sort of replaces forms with serializers. So you can use exactly the same structure with Django. Or if you like, you can move the DRF modules to a separate api package either for each app or project-wide. It all depends on you. But to keep it simple since it's an API only project, you can just use the normal Django app structure with DRF modules flat in the apps
I am using reactjs for frontend and Django REST API for the backened. What is the best possible way to integrate both?
which of these two is a good option?
Running two servers for frontend and backend?
or
replacing django templates with reactjs?
Your help is highly appreciated.
Few options here
Django templates with react.
Not my preferred method. Essentially, you are blending django templating and jsx. The benefit here is low over head. It requires little configuration and allows you to write react and leverage the django templating language in the same file. If you need to get something up and running quickly, its a great solution. Have a look at this library https://github.com/Frojd/django-react-templatetags
Using django webpack loader
This will allow you to separate your react code from django code but still keep all your code to one repository. You need to configure django settings to find your react code. Then on your prod/dev server, have your web server point to the directory where your static react code lives or write a django url and view that will serve the react apps index file. It will be located in /static/ after you configure correctly and run python manage.py collectstatics. Benefits here are that it keeps the code to one repository but still isolates the python and javascript code. This is a middleground solution of the three. Quick note. You won't have react hot reload with this method for development. Here is the library that helps you configure this setup https://github.com/owais/django-webpack-loader
Having 2 separate applications
Similar to what you are doing right now, have a separate react repository, either served by a nodejs backend or deploy the code to a cdn service like amazon s3 and serve the one page app from there. And then as its counterpart, have your django app on a separate server with its consumable rest api (will need to configure allowed cors) . This method requires a lot of operational work: deploying, configuring, and management of 2 separate code bases. If you have the time and resources I do recommend this setup. The decoupling of the 2 apps allows this solution to scale the best
What do you mean two servers? You mean two projects/repositories?
Yes, you can keep frontend in the separate project. It make sence if you have multiple clients for your backend (like mobile apps and web). Different developers can have permission to edit only their repositories. Also it make sence if you are going to use some microservices structure for your project. But more simpliest way is to keep frontend and backed in the same project. Try to check some tutorial about Django+reactjs apps.
I have created a Angular 2 form which posts the form data to a postgres DB using a Rest API. Now, I want to serve my Angular 2 app on AWS S3. I googled on this and I found that creating a webpack is a solution but not able to create one. I want to know where to start with, to bundle my code and serve it on s3.
GitHub link for Form: https://github.com/aanirudhraj/Angular2form_signaturepad_API
Thanks for the Help!!
The quickest way is to build the app using angular-cli and then deploy the content of the 'dist' directory as a static site in S3 (an S3 bucket can be configured to host a static site; make sure you assing read permission to 'anybody' to avoid http 4xx return codes).
You just need to host it as a static site on S3.
Check this: http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html
I infer from your code that you are using angular-cli.
Create a dev/production build
ng build --dev / ng build --prod
Content of your dist folder will contain bundled files for deployment. Your primary file for refrence will be 'index.html' as this will load you angular app.
You need to decide what kind of server you'll be using to serve you webapp.
For development purpose when we do ng serve , webpack-dev-server is used as a static file server (local development). I'll recommend should go with the most comfortable/cost effective solution you can have when deploying to actual server.
Static file Server
Directly hosting website is aws space as a static website.
Aspnet Core with static file server middleware. (*)
Nodejs Express with static file server middleware.(*)
Java serverlet for serving static files. (*)
(*)Following aproach will also allow you to have some server-side code if you require in future.
When you deploy your ng2-app, you should use AOT(ahead of time) compile.
I guess you are using JIT(just in time) compile.
In angular2 guide page,
With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
When you use JIT compile, your browser will download vendor.js which is defined by angular2 compiler and it will compile your app just in time. It will be too slow and your client have to download vendor file. When you use AOT, you dont have to use vendor file, so resources are being smaller.
I recommend to use AOT compile when you deploy your app, and use lazy loading for resource size.
If you are curious about ng2 AOT compile, read this guide.
angualar2-cookbook-AOT
And here is example angular2 app with webpack2 and lazy load.
use file structure and config files in here.
When I tested with example app, files bundled with aot was smaller than 500KB.
angular2-webpack2-aot
When you use aot compile with #ngtools/webpack or whatever,
just put all files in dist directory which have files compiled with aot in your S3 bucket, and I recommend to use aws cloudfront cache for your s3 bucket resources.
Currently, I am doing an API versioning for our project. We have 10 apps and 45 API endpoints. Each app has models, tasks, utils, constants, serializers, views and urls files. Now, I have created an apis app which contains version folder e.g v1, v2 etc. and each version folder contains serializers, views, utils and urls files.
Now, I need to know what should I consider for versioning? should I version the tasks, utils and constants also? And how should I do versioning for models?
Please guys help me to sort out this.