I have an .html file and a corresponding .js file (using Bootstrap) I need to deploy this to Heroku.
I'm really trying to avoid having to rework this entire project, I need more than just bootstrap styling. This project pulls data through an API, and populates based on the data pulled. Input is also needed from user to update the backend through API...
I've tried to find examples of how to accomplish just pulling in html/js into nodeJS/expressJS... but it seems most examples are just to use Bootstrap.css for styling, or there's no actual UI interaction coded in the example.
Any links or input will be greatly appreciated.
If you want to render a html file prepared in the server side. You need a view engine like ejs or pug. You can pass data into the html page. Another way of doing the same thing is a framework called NextJs or NuxtJs but you need to know React or Vue.
You can add bootstrap.css into the public folder and express.static will handle the problem. Or you can use CDN links too.
Then you can add the url of bootstrap.css into the html head.
https://expressjs.com/en/guide/using-template-engines.html
https://expressjs.com/en/starter/static-files.html
Related
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 want to be able to create a PDF and send it via an email to the user in Express.js. My current tech stack contains: Next.js for the frontend and Express.js at the backend.
Basically, I want to send out an invoice to the user after the payment has been made. I'm currently sending an email, but I want to create a PDF and attach it with the same email. The invoice will be HTML-based, which means I'll have HTML tags like header tags, tables, etc. and CSS for these elements.
My front-end (Next.js/React) are actually not relevant here, because all the data required for the invoice is handled by Express.js itself. So, I'm considering using jsPDF to do this, but I'm not sure how to go about it. I don't use Pug in Express, but I want to dynamically create the HTML and use that to create the PDF.
Can anybody give me a direction here?
Thanks in advance.
If you know any React, there's React PDF that allows you to create PDFs, you could then save them locally before sending them, that might be an option, but it's not really HTML though.
Yes, pdfjs is something you want I guess. You can create your own HTML templates with placeholders for the variables that you might want to keep dynamic. You can easily find out a lot of examples on this on the internet to satisfy your requirement.
I have recently started learning React and am trying to make a simple blogging app. I store the data (post content, comments etc.) in MongoDB and would like to render the content according to the route, such as, when I have a certain URL (like /blog/:username), I'd pull data from the database and then render a view with the data content.
Using Express, I am now using static html files ( express.static) as the view, yet this makes it impossible to render the content according to the requested route, such as:
/blog/:username/:article
It is possible with a template engine, like Jade, but Jade, as far as I know, does not work with React.
What is the correct way to make dynamic views using React while preserving the URL route structure?
Thank you
Generally speaking, there are several ways to achieve your goal. I'll sketch the one that I feel is the most natural approach when using React:
Create your blogging app with React
Use a frontend routing mechanism such as react-router to make React aware of the URL
Either fetch the data for each blog entry from the backend via an Ajax call each time the user hits a URL, or store the blog entry data in the frontend (e.g. using something like redux) and reuse it when required.
Does this make sense? If not, please keep asking...
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.
Is it possible to generate Server side includes with express.js?
I'm trying to reuse my header and footer markup on different pages so I can make header/footer changes in one place.
Try to use partials.
You have to choose between some template engines. The default template engine is jade, so for this you have to do the following: create a file views/header.jade and put your stuff in. in your action you can render the partial with partial('header');
See the expressjs docs for more.