Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm a junior front-end developer, and I want to create a simple API. I have already a mook of this API deployed on Heroku (available on this link), developed with Express.
I want to create a website with Vue, where the root path is, logically, the website, but I also want it to have a path similar to example.com/api/v1/ministries for the API. Basically, I want to create a kind of landing page for the API.
I don't see it as something so complex, but I didn't know how to google it and, therefore, I don't know where to start.
I know how to create applications with Vue and I already have my simple API, but with the knowledge I have it would be applications raised on different servers and I don't want that.
In my mind, I should create a new app with Vue, develop it, install Express in the project and lift the API, but honestly, I don't know how to put those two steps together.
Please make your api in english, the person after you will thank you.
You could make an express app and move the output (dist) of your vue app in the public directory of express.
This way you'll be able to easily add routes
// Move vue output to folder named 'public'
// Point express to this folder
app.use(express.static('public'))
// Send the index.html (vue entrypoint) to the client on request of /
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
I have a small project running and I question myself, how to do it. I host on two server. One is for Backend and one for Frontend. The Backend-Server is running on NodeJS and as DB MongoDB and I already have my own small API to communicate with it. On the Frontend-Server I am using React. My Question now: What is the best way to make a SessionID on the Frontend and Send it to the Backend-Server over the Frontend-Server?
For example SessionID3 should get displayed a bike on his site and SessionID2 a car (both informations are stored on the Backend-Server on the DB).
I look forward to any replies, thanks!
Most Jamstack setups have an API server that serves content in the form of json/raw (like Github's developer API)in which Nodejs and JavaScript has a built in feature which allows the quick conversion to a JSON object with references in which you can read about that on MDN.
Diagram of Jamstacking with React & Vue
^ since it is actually the client sending the request and doing most of the work and not the front-end server, you can use universal-cookie to set or get a session ID permanently, parse it into JSON and send with the POST request to the Back-end API. You could also do this with Math.random(min, max) as well of you just want a random string of numbers to be sent.
Axios is asynchronous so you want to use async/await or .then() with it so that it works correctly. You can view the official docs at https://axios-http.com/docs/intro. The value returned by Axios is the response in which you will want to parse the "body" the header returned so it can be used.
Another alternative to get the browser session id (which is erased after the browser is closed) is a module called react-session-hook
In my opinion, for what you are trying to do, adding another server that relays the message is not optimal as that adds another sequential connection that makes things take twice as long as it would otherwise. In other-words, this is not necessary. The only time you do this is if the keys to access the API are sensitive meaning they contain important information and musts be hidden.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have been trying to connect my flutter app with a node.js backend to send images and I don't know how to begin to code this. I have a vague idea about writing apis using node.js. My flutter app should take an image using the camera and send it to the backend
Starting from Flutter frontend, your can use a package like image_picker to pick an image file from your camera or gallery.
On backend side if your are using nodejs(using express will be a good option for API) and mongodb(a no-sql dbms), you can create a collection for storing all your images as documents.
Helper link for express routing : https://expressjs.com/en/starter/basic-routing.html
mongoose is a good library for nodejs that will make your work a lot easier.
Once that's done you can create you own apis which will be inititally hosted on your own computer(localhost) using functions like app.post() etc. provided by express. Here you can create a POST request which will take the image file from frontend as form-data. Extract the image from the body and store it in your database.
Then you will also need to make a GET request to take that image file from your database and pass it to your frontend.
Then using the flutter's inbuilt http functions or using http package, you can extract the images from your database using the API's you made.
Unfortunately I can't explain thing in details in just one answer, so you will have to do a lot of research yourself. Below are some links that will help you if you choose node(express) as backend framework and mongodb as database.
Best example of storing and retrieving images using express and mongo db : https://gist.github.com/aheckmann/2408370
Follows the same technique as above but explains what he's doing : https://medium.com/#alvenw/how-to-store-images-to-mongodb-with-node-js-fb3905c37e6d
There is a few ways to do it, I will probably do like this.
On the nodejs part, create a simple express server and combine with the package call multer to handling all the incoming file.
And on the flutter part, handle the image using a package call image_picker and sent it in a form data through http
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Hi, I'm new.
started with React.js, by my self, three months ago, on YT.
mostly fetching API
some API's are secured with a signature
didn't know that my API calls must be on the server, not in React
getting CORS error's
didn't know what is and how to fix cors.
started to learning a back-end
every video on YT:
JSON placeholder
SWAPI
no video with React and back-end,
no POST signed request from server video.
almost give up
CORS error solution:
now I know how to fix cors:
with proxy to express in package.json,
adding setupProxy.js in src,
and "app.use(cors())" in Express server.js
My react app:
runs 24/7.
need to update the states every 3s from API.
then compare states-data. (that is some secret formulas and functions that cannot be exposed to the public if that's even possible. To hide code on the express server.js)
and take corresponding actions (new API calls).
Question part:
is that even possible?
how the app is working if no one is on the website?
this means that the Express server.js is always alive
and React UI is alive only when someone open website to see what's going on with data
how to deploy react-app with express? is this good?:
https://dev.to/nburgess/creating-a-react-app-with-react-router-and-an-express-backend-33l3
how to host - where to deploy? On Github pages?
do express server autoruns on deploy or do I need "npm start" on hosting
or open the app for the first time, (open website)
how that works
do I need django
what is better:
if I decide to share my app with other users:
to give them each a copy of react app, and they deploy themselves
or
make a universal app so each user can log in and have their own express server with dashboard and their own data and states.
if the universal app is better were to learn that
Thank you for any question that is answered.
Server runs 24/7
when a user wants to access a page of the website, the server sends it the page's blueprint (the html, css and js, which in this case is built by your react js build code), that's when your react app comes alive.
you already have express for server side, you don't need django.
yea deploying with heroku is fine. it'll take care of the server but you'll have to add a script in the server's package.json to make it build react, if you're not already uploading a react build to heroku.
"heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
here client is the folder you keep your react code in.
If it's not supposed to be public, you shouldn't have it as a react state.
Using a universal thing is better, just make an account system with owner as a privilege, and have the url in the form of www.website.com/owner'susername
and done, every owner gets their own version of the website.
(there's an awesome MERN stack tutorial on youtube by traversy media that answers most of your questions)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
My Spec : Login, Logout, dashboard, I need to render 150 inputs in single form, need to download pdf file for saved inputs. And each inputs need to save input blur action and also form submission.
The existing application has build nodeJs with expressJs with jade template for rendering. Backend(mySql) connection has builded laravel (lumen).
FrontEnd - NodeJS, ExpressJs, Jade template
Backend - Laravel Lumen
Provide some suggestion to best language for my requirement to code.
Had some suggestion like
Laravel + VueJs
NodeJs + ExpressJs + ReactJs
NodeJs + ExpressJs
Thanks in advance
You can create REST API using NodeJS and Express framework. If it just uploading file and auth you can use middleware function and the library you can use like multer and jsonwebtoken for uploading and user validation.. i prefer hbs instead of jade because it HTML based.
I hope this helps
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Hello and thanks to everyone for helping.
So I would like help with my project.
So what I would like to happen is get an image from react after posted,
then convert that to base64 so I can post to mongo with mongoose,
and finally, be able to display that but in the process of all of this,
I don't wanna use local saving or in any clouds.
Does anyone know how to accomplish that?
Please share you ideas.
-StayHome
React: Uploading
For the Base64 Conversion, You could:
You could use plain javascript to accomplish that. Refer more here
Even better, use the advantage of NPMs for React. Use a library someone has already built in. This documentation looks awesome for it. Here's the demo for it.
Once you have converted that to base64. I presume you will be storing the details in the react state, you could now do some AJAX request to your server.
Express And Node: Receiving Data Most of this will be boilerplate code until you get to the part where you have to write the APIs. For this portion, you will need to create an API on a specific route that you will specify that will accept POST method.
Three important folders to take a look into:
Routes
Controllers
Models
Routes will be your entry point for APIs, and will use functions that are defined in the controllers. These controllers are made using mongoose functions that will be based on the models that you will create. The controllers you probably will need for this scenario is CREATE and READ.
Mongoose and MongoDB
Connect those to MongoDB. There's a lot of resource for this such as this.
Express and Node: Giving Data
Once you have finished the database models and controllers. You will have a controller for getting specific data in the database. Now you can create a route that will serve this API, usually in GET method.
React: Receiving the Stored Image
In the page that you require the image, you could perform a AJAX request in componentDidMount and store the data in the state.
Using HTML and react, you could create this. More info here
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>