I have created a symfony project.
For manage the js and the css I use webpack encore as advised in symfony official.
And in dev environment, everyhting works well.
yarn run encore dev create correct path for my asset.
An example of my html
link href="{{ asset('build/page-connexion/connexion.css') }}"
the request URL for that is
http://localhost:8000/build/footer/footer.css
But in production when I run "yarn run encore production"
the path is not correct
the request url for the footer is
http://mydomain.fr/build/footer/footer.css
it should be http://mydomain.fr/mywebsite/public/build/footer/footer.css
How and where can I configure this path? in my HTACCESS?
I know that if I change setPublicPath('myfullpath') with the path of my server in the webpack.config.js it will works. But logically i don't have to change it?
Thanks in advance for your help
public is root directory for your webserver. And if you configured setOutputPath and setPublicPath in webpack.config.js you need just add link href="{{ asset('your_entry_point.css') }}" to html code. Also you can check entrypoints.json this file will contain all paths for your entrypoints.
Related
I need to host my Vue3 app not in the root of the domain but in a subfolder e.g. https://my.domain.com/vue-app/. I have found this in a vite documentation: https://vitejs.dev/guide/build.html#public-base-path and tried to add base into my vite.config.js like:
// vite.config.js
export default defineConfig({
base: "#{AppBaseUrl}",
// ... the rest of config
})
But it didn't helped. After the build index.html still contains links to /assets/... e.g.
<script type="module" crossorigin src="/assets/index-789e2ef4.js"></script>
next I tried to use command line parameter --base="#{AppBaseUrl}" with no luck.
The APP was created using npm init vue#latest and updated to latest versions of vite and vue3.
Am I missing something?
I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.
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 created a jhipster ui only angular 6 app.
I now want to add a script to index.html:
<head>
...
<script src='widgets/widgets.js'></script>
</head>
When I run the index.html is copied to the build/www directory fine, but in the app my script tag or any other changes are not there.
Seems that webpack does not use my new version.
How do I get webpack to use the changed template?
You have to use webpack in order to achieve the script tag injection.
Add your script to the entry points of webpack in the entry property located in webpack.dev.js (or prod) file, then add the related key inside the chunks array of the HtmlWebpackPlugin (it is located in webpack.common file).
This should inject the script tag inside your index.html
Ok, learning here. Installed the default vue-cli app on AWS. I do a npm run build. When I launch the default index.html I'm served a blank page. If I go into dist, there is another index.html, that serves links to js files, but still a blank page.
I'm guessing webpack wants me to launch an index.html, but don't see how I can hit that with a browser. No errors anywhere. But no Hello World either. thanks for help.
What I'm seeing in the browser:
<!DOCTYPE html><html><head><meta charset=utf-8><title>hello-world</title><link href=/static/css/app.87e65e7c83fb67c04e58d4461a7fd8e8.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.fa7eecfb52900d1cfb0a.js></script><script type=text/javascript src=/static/js/vendor.9baeef453ba99a70f46a.js></script><script type=text/javascript src=/static/js/app.cdfbb21001bbc43de4bc.js></script></body></html>
When you npm run build Webpack should produce an index.html file along with a static/ directory that contains all of your javascript and css. The link to static/ is an absolute link (i.e. http://example.org/static). When you try to open index.html as a file, the browser will look for the /static/ folder on the root of your file system, which of course it won't find.
To run it locally you need to fire up an http server locally. One option is to cd into the directory with a terminal app and run python -m http.server. Then go to http://localhost:8000/. That should work because the root of the directory tree will be the folder from where you are serving it.
Getting it running on AWS S3 will be a matter of making sure you get the static directory in the right place and get the links pointing to it. Hard to say exactly how without knowing details of how you are organizing the site in your bucket.
You can change how the static folder is saved in the webpack config if you need to: https://vuejs-templates.github.io/webpack/static.html
You will find a folder named /dist in your project directory.Just point the index.html file within the /dist directory and rest will work fine I think. I have just done that and it's working fine.
Hope it will work.
Thanks.