Importing packages with ReactJs added to a website - node.js

I'm not able to import the axios package using ReactJs integrated to my website. It looks like it's only possible when you create a new react app as in my case I dont have a package file only a package-lock one. What's my problem here and what are my options? I have a django back-end.

Related

How we can connect react js with django?

How we can connect react js with django without installing node js?
Code of connect django with react without install nodejs server
You can utilize https://django-webpack-loader.readthedocs.io/en/latest/
Granted you will still need node to build the react app
You can create APIs in your Django backend and hit those APIs with fetch in your react application and can interact with the Django server.
You can also install the django-webpack-loader package, which will help you integrate React with Django.
In your Django application settings include the django-webpack-loader package and configure it to point to your React application.

How to convert an angular app to a npm package or a Library?

I have an angular app. It fetches photos and videos from the server and shows them as a slide(one by one). Now i need to integrate this feature into another app. Is there any way to convert the angular app to a library or a package? So, i can simply install the package using npm i.
you can create an Angular library you can push it to NPM but this works only with other angular apps. https://angular.io/guide/creating-libraries
Another options is to user Angular Elements. This will create some web components. You can integrate the webcomponents in any HTML/JS webpage https://angular.io/guide/elements
the last option I see it tho use iFrames.

How to use and cache same node modules for multiple react apps

I've created a simple react app using create-react-app, and deployed it on a laravel server. Now, I need to create another React app for my admin dashboard. The problem is, if I had to create more react apps in future for different parts, the node modules will take much more storage. Is there such a way to use same node modules for all react apps, and build node modules separately to cache it and react apps can use them in production without every app coming up with their set of node modules folder?

Full Stack NextJS Application

I created a lot of projects with ReactJS.
Therefore i created a frontend with ReactJS and a backend with express js.
Now i want to switch to NextJS to avoid creating a seperate backend, because NextJS has api routes builded in.
So i created a new NextJS project with npx create-next-app MyProject --ts for typescript support.
The first steps were great because of rendering, routing etc.
But then i wanted to add a local database (mariadb) to fetch data.
In my last projects i used typeorm as ORM witch worked very well on the express js backend.
But i was not able to add typeorm to nextjs. And i didn't find any post which explains how to do it. The only orm which seems to work is prisma. But i don't like the syntax.
So i'm thinking if NextJS is the framework to choose to program applications with local db.
What is your stack to create a web application?
I have use https://massivejs.org/ to connect my fullstack NextJS but with PostgreSQL instead.

Different ways to use react inside node and their pros/cons

I'm working on a project and using nodejs as backend. I want to use react for the frontend. And currently, the way I know to use react is by creating a client folder inside it and using create-react-app and then running both the server separately and using the proxy to connect with the node backend. The other way I came to know is via this link which basically involves installing react, reactdom, webpack etc, and using it directly inside the node app without having a separate server for react as in the case of create-react-app. So which way is better and what are their pros and cons.
The usual way is to run both react and node in separate servers.
Create the react app using npx-create-react-app
Create the node app using npm init
If both the folders are in the same directory you can use a npm package called concurrently and run both the servers with a single command. Also don't forget to install the npm package cors in your node app. If you don't , you'll get CORS errors from your API calls.
Imo using create react app is better than manually trying to configure webpack. Saves a lot of time and it's more easy to deploy.

Resources