Trying to fast-forward through my node+npm+webpack learning, and here's a simple boolean question: can a node module js file require a vanilla js file? Or, do I need to "node-ify" the vanilla js with a module.exports?
In some tests, I've seen that a module.exports isn't required to "node-ify" some vanilla js. What is required is a parent folder for the vanilla js that also contains a package.json that specifies a main js entry file. Then, it's npm-installable into other node modules. module.exports is for a module's api.
Related
I want to use ReactDOMServer.renderToStaticMarkup to create a static website, but I only want to generate the html string once during build instead of dynamically for every request
Here are the relevant docs, but they don't go into much detail on implementation https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
What is the best practice for using react to generate html one time during build instead of dynamically on every page request? I am using webpack.
For anyone who comes here looking for answers, here's how I did it:
Create a separate webpack config file for your SSR react like webpack.ssr.js. This file will have the same config you'd normally have for react SSR.
In the index.js file where you'd usually have ReactDOM.render, run the ReactDOMServer.renderToStaticMarkup function.
In the index.js file, write the html string to a file:
const html = ReactDOMServer.renderToStaticMarkup(App);
fs.writeFile("index.html", html, (err) => {
if (err)
console.log(err);
else {
console.log("File written successfully\n");
}
});
After every build, execute the build file as a node script. For example node build.js. I'd recommend doing this in package.json as a postbuild script. For example:
postbuild: "node build.js"
The fs.writeFile will update the index.html file each time you build, so you'll just need to serve index.html like you would with any other static website.
For css modules, you'd use something like isomorphic-style-loader instead of the regular style-loader.
If you are using something like react-router, you'll need to iterate through all your routes and run ReactDOMServer.renderToStaticMarkup and fs.writeFile for every route. Then you'd serve the different html files with server side routing.
This will also work for normal SSR using ReactDOMServer.renderToString, especially if you don't need dynamic SSR based on something like an ID. For generating the loading screen server side, this is great and there's really no reason to generate html dynamically at runtime.
The file structure is based on sailsjs structure, we don't use sailsjs though, this is how it looks like:
Stack used is : EJS Express/Node MongoDb.
I want to move a certain page from ejs to ReactJS and also implement Webpack with it.
Is there a way I can convert this into a react app, or simply use react with ejs ?
You can use try react cdn links as script tags.
https://reactjs.org/docs/cdn-links.html
Node.js is special because the backend and frontend use the same language. I wanted to take advantage of this and only write 1 set of util functions (universal functions like numToPercent) for backend and frontend. Here is how my (important) files are structured right now:
project
public
index.html
index.js
scripts
script1.js
index.js
otherScript.js
Where is the canonical location to put my util file?
Edit: to make this more specific, is there a "shared" folder or something to put this file? Because otherwise public seems like the best place to put this
You can package the shared code and add it as a dependency via npm.
E.g. Using SimpleMDE. I've installed it to node modules, what's the right way to include it? Making the nodemodules/simplemde public seems like the wrong move. I'm using express and ejs.
I have web application which is following below structure.
app_name
bin
node_modules
public
images
javascripts
stylesheets
views
index.html
app.js
package.json
i'm unable to use require() inside /public/javascripts/xxx.js file,it says Uncaught ReferenceError: require is not defined
i'm i missing something ? plz advice.
Uncaught ReferenceError: require is not defined means that you are trying use require in the browser (client side javascript). You cannot require CommonJS modules (i.e. those used in node.js) in the browser.
There are several ways to get around this, including RequireJS and Browserify.
I would suggest using Browserify. You can get a good overview of the pros of using Browserify here