I am quite new in NodeJs and here is my issue:
I am developing a small app using Express.
In this app, I want to open a door for third party to install a kind of plugin. The idea is I have a "plugin" folder and they can create a plugin with a bootstrap file like "bootstrap.js"
From this file, they can define route...etc.
The main application will crawl the plugin folder and load the plugin automatically by requiring "bootstrap.js" file.
The problem is from the "bootstrap.js" file they can access everything like the app, request, route object by requiring Node module and modify them.
I want to prevent this from happing. I don't want the plugin to have access to main objects (Express app, request, route. ...) because it could make the application a mess.
Is there any way in Node when I can load a js file and prevent that file to execute something not allowed?
Thank you so much for your help
Related
I'm working on a project for adding an external pre-registration page with Stripe to a Wordpress website.
The wordpress is already in place. But the pre-registration page needed the Stripe module, working on back-end...
So I've decided to make a SPA outside this wordpress to have this pre-registrations set up for the next customers.
But now, I'm struggling from days to find how to put this project online, I may definitely need your help for that.
I have this file structure:
File structure
It's nothing more than a single page + a single css file and a single server.js file, that I need to start to interact with the Stripe API.
But I also need some modules like Stripe, which is the key function of this project.
I thought about bundling it with webpack (only the back-end, as the front is only composed of 1 html and 1 css file). Then upload it on my web host.
Haven't found any working way to do so.
I'd like to try some cloud services like Netlify, but I don't even think that it could work without bundling the server side
Everything works perfectly on localhost, but I'm absolutely unable to make it works in prod with a real domain name. And I'm already late to deliver it.
Do you have an idea on how I could do that?
Thanks
I am pretty experienced with NodeJs and Express, but I'm a beginner in ReactJS.
I usually use ejs and deploy my server on Express like this and route server-side.
app.get("/", (req, res) => res.render("index.ejs");
app.get("/contact", (req, res) => res.render("contact.ejs", { data: data });
Something like this.
However, working with React (create react app), I find myself not using express at all for routing and only serve an API.
Create React App apparently already has a server (localhost:3000 by default) and I can perform client side routing directly there.
Should I deploy my server on a client-side framework, React?
I don't even need to serve static files on express.
Hope you understood me, thank you for your help :)
First of all react is a library and second of all, when you say that it has a server that means it's a development server, for reviewing the results while you're working on it locally (means when you are building your application, you need to see how it looks in real-time). It's not for production use or included in the build output. Now let's say your application is ready and you want to deploy it, then you run a build command which does the following for you
transpiles JS code
bundles code and assets
uses cache busting techniques for assets
removes dead code
and you will deploy your application on a server, so that it can be accessible to clients
I don't need to serve static files on express, explanation below
In modern-day websites, we don't have to use views because react comes into the picture and takes care of the clientside-UI that the user interacts with, so you are right that we don't have to use static files in express anymore but if you have a use case where you have to use it then you can use it, no one is stopping your from doing that
and lastly you can have your own node js server as well which your front end will be talking too, not for views but for data that is stored in database that you want to fetch and display it to the user
React by itself just create static html-css-js files, but for testing purposes, they have also included this handy way (localhost:3000 pipeline) to view the built files. Technically you don't need to use it, just use the build script, then set up an express server to serve the files from "build" folder, and it does the same thing.
About client side routing, basically what happens is the entire page gets downloaded client-side, and it uses the value in url box to show or switch to certain screens. This is why its called "Single Page Application", you are serving a single page to the client upfront with all the static code. Compare this to express-ejs where you serve static code conditionally, depending on the address.
Take a look at CRA's docs for more info about deployment.
I want to use React for a project I am working on, but I also want to use an API.
How can I do it?
I have tried to Google this and ask different people, but I have not got a response yet, so I thought I would ask here. I want to use express and maybe not use create-react-app (as it takes up a lot of storage).
Working on a custom server doesen't preclude the use of an API.
If you want fetch the API from the express server and inject it directly on react frontend you need to enable server side rendering (useful post) and pass the data collected as a props from the server (check this example).
Rather then you can build your react project (using even create-react-app) and build an express server who return the index.html on call.
Personally I prefer the first one solution.
I need to build a page builder where we want to drag and drop elements to a screen which become a config json object. Then I have to save that config object into a config.json file in the project folder (or somewhere where I can load it when re-rendering the app). We want live reload when editing the pages via this page builder.
The FE drag and drop app is built with React, and I can reach the point where I have the JSON object in memory.
How do you recommend me to do the architecture this for the BE side?
Is is possible to expose an API endpoint (with Express for example), and save the json file somewhere into the React App "/src" folder? or I can edit only files in "/public" folder?
What if I refactor my FE React app into a Next.js app? If Next is rendered in the server, does it mean that I can do the config file editing just before it gets rendered?
Is it better to create an independent Express App where I save all the config.json files? and then exposing them via API endpoints both for editing and reading?
Thanks in advance!
From your question I see that you are developing a app similar to wordpress where the users can easily create a page using drag and drop of elements. So here a configuration is need to persist the placement of elements.
I read all the three approaches mentioned by you and it seem the third approach will help you. You can run a express app and use a db to store the config setting as I find storing it in the file is not a good practice. Once the editing is complete you can make an api call to post the data to db and similarly while reading you can pull the data from db using api call.
I developed a small node.js app in which I can configure conditions for a custom javascript file, which can be embedded in a webpage, and which modifies the DOM of that page in the browser on load. The configuration values are stored in MongoDB. (For sake of argument: add class "A" to DOM element with ID "B" )
I have difficulties to figure out the best way to serve requests / the JavaScript file.
Option 1 and my current implementation is:
I save a configuration in the node app and a distinct JavaScript
file is created for that configuration.
The page references that file which is hosted and served by the server.
Option 2 and where I think I want and should go is:
I saves a configuration (mongodb) NO JavaScript file is created Pages
a generic JavaScript link (for instance: api.service.com/javascript.js)
Node.js / Express app processes the request, and
returns a custom JavaScript (file?) with the correct values as saved in mongodb for that configuration
Now, while I believe this is the right way to go about it, I am unsure HOW to go about it. Any ideas and advise are very welcome!
Ps: For instance I wonder how best to authenticate or identify the origin, user and requested configuration. Shall I do this like: api.service.com/javascript.js&id="userID" - is that good practice?
Why not serve up a generic Javascript file which can take a customized json object (directly from mongodb) and apply the necessary actions? You can include the json data on the page if you really need to have everything embedded, but breaking up configuration and code is the most maintainable approach.