I'm trying to build separate HTML files using an index.ejs using html-webpack-plugin.
My index.ejs has the following block of code.
<% if (process.env.NODE_ENV === 'production') { %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<% } %>
I only want to load these scripts in production.
In my webpack file I'm loading HtmlWebpackPlugin to specify the location of the ejs template.
plugins: [
new HtmlWebpackPlugin({
template: 'index.ejs'
}),
...
When I run webpack in production mode, with --env.prod, it properly builds the file into my public directory. But when I run with --env.dev, this plugin does not run.
How can I run HtmlWebpackPlugin in development mode to build an HTML file specific to my dev environment?
You can use ejs-render-loader package.
Related
I have a simple setup with an index.html, some js file and a sass file, building it with vite. I am using vite defaults without a config file.
After running a build the index.html in the dist folder references everything as static paths:
<head>
<script type="module" crossorigin src="/assets/index.b850bc1f.js"></script>
<link rel="stylesheet" href="/assets/index.04d1c13d.css">
</head>
The same happens to url() paths in css: They are turned into static paths as well.
My question is: Is there a configuration option to make vite output relative paths, so:
<head>
<script type="module" crossorigin src="assets/index.b850bc1f.js"></script>
<link rel="stylesheet" href="assets/index.04d1c13d.css">
</head>
This leading path is the base URL, configured by the base option, which is / by default.
You can remove the base URL by setting base to an empty string, making the path relative to its deployment directory:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: '', 👈
})
demo
So I've been configuring a MERN app with a main package that runs an Express server, and a client folder which contains the React front end and has its own package. To test the client I've been using webpack-dev-server to run an HTML file within the client/public folder that links a Webpack bundle in a dist folder. The HTML file:
<!DOCTYPE html>
<html>
<head>
<title>React Config</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>
The relative path for the bundle is correct, and it works fine using WDS. However, when I try to serve this file via my Express server, I get a 404 error for the bundle file. In my server.js:
app.use(express.static('client'));
const appPage = path.join(__dirname, './client/public/index.html');
app.get('/', function(req, res) {
res.sendFile(appPage);
});
This does serve the HTML file correctly, but when I navigate to the local server it's trying to find bundle.js at http://localhost:3000/dist/bundle.js, instead of http://localhost:3000/client/dist/bundle.js. Furthermore, even when I change the path in the HTML to point to the right location, it 404's anyway.
So 2 questions:
1) How can I configure the paths for the Webpack bundle to be accessible both from WDS run within the client folder and from my Express server in the main package?
2) Why is the bundle not being found by Express even when I alter the path to be correct? I've included the entire client folder as static for the server.
You should not use webpack-dev-server for production, webpack-dev-server not build the index.html file, webpack-dev-server is only for developers.
You can use this command to build it:
webpack --config ./webpack.prod.js --mode production
I'm working with Symfony 4 and my deployment platform is Microsoft Azure. This is my website :https://synergie-2i.azurewebsites.net/SynergieInformatique/public/index.php/.
My problem is when my environment is in production, my css and js aren't loaded. When inspect my page in services i see my folder SynergieInformatique/public and an other folder name build. Inside there is 3 css files but there is nothing inside. I think webpack didn't write my css in these files.
I have try to copy my css and put in the empty css file and it works but i don't know how make this with symfony.
When i'm in dev environement, the folder build is in SynergieInformatique/public and my css is loaded.
###webpack.config.js : ###
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addEntry('owlcarouselcss','./node_modules/owl.carousel/dist/assets/owl.carousel.min.css')
.addEntry('owlcarouseljs','./node_modules/owl.carousel/dist/owl.carousel.min.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
.enableSassLoader()
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
});
module.exports = Encore.getWebpackConfig();`
What are the step for deploy an symfony 4 application with Webpack and how i can have my css and js load on production environement ?
If you need more informations ask me :)
I have found, my links were bad. I use {{ encore_entry_link_tags('app') }} and this doesn't search at the good folder so i remplace this by <link rel="stylesheet" href="/SynergieInformatique/public//build/app.css"> and it works.
I just want to test if bootstrap work good with my react app. (I am using a boilerplate which already contain webpack)
I could use bootstrap by import the files at webpack entry which learned from how-to-use-webpack-with-react-and-bootstrap:
install some node packages to cope files with different type
edit webpack.config.js to let it use above installed packages
But, I just want to have a try, and I think it make build slow if bundle other js lib into bundle.js (I need hot load, so not expect webpack bundle all).
Now, I write code like:
<!doctype html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="res/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="res/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="root"></div>
<script src="/static/bundle.js"></script>
</body>
</html>
The content of bootstrap.min.js and bootstrap.min.css is empty.
I have tried to change the path from "res/bootstrap/js/bootstrap.min.js" to "src/res/bootstrap/js/bootstrap.min.js", but not work.
Also try to set resolve in webpack config by Resolving require paths with webpack, it result to another error like Cannot resolve module 'react'
I know I may mistake root path or miss some config, but can't figure it out,
what should I do?
OK, a little late to post answer,
the problem is by express.The project I forked is use express to start webpack project, it does contain webpack.dev.config.js which make me think it is using a webpack devserver.
I understand the problem as soon as see this :
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
I didn't care how the base project started before. It used express, not webpack devserver, just a simple route problem.
change to below work,
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
One complain: does nodejs devs like to set * router ?
I have the following folder structure in my node project (using node, webpack, and express):
dist/ (folder containing .js files)
views/ (folder containing static .html files referencing .js files in above mentioned dist folder)
The index.html (located in the above mentioned views folder) file contains the following:
<script type="text/javascript" src="../dist/test.js" ></script>
In the app.js for the node application I am serving the static .html page in the following manner:
router.get('/setup', function(req, res){
res.sendFile(path.join(__dirname, './views/index.html'));
});
The problem is that the .html renders properly but it is unable to find the .js file which it references. How do I fix this?
Inside your app.js file add line:
app.use('/source/', express.static(__dirname + '/path_to_js_folder'));
And modify your < script > tag as:
<script type="text/javascript" src="/source/test.js" ></script>
Use this src="./dist/test.js" instead of src="../dist/test.js". May be this will be the problem
You can do the following -
app.use(express.static('dist'));
router.get('/setup', function(req,res) {
res.sendFile(__dirname + '/views/hello.html');
})
And in your html file just do this -
<script type="text/javascript" src="test.js" ></script>