It is easy to build a multi-page app of Vue can be building by editing the vue.config.js file. But yesterday afternoon, when I was trying to build a multi-page web app with some ui structures in Vuetify.js instead of pure vue.js, one weird thing happened:
It is a two page application: the home page and signup page. When I run npm run build, the result dist folder does not contain the .html file of the second page.
SO I run some tests: here are what is happening:
If the home page has a filename of index.html in vue.config.js and the second page has a filename of second.html, then everything is fine.
If the home page has a filename of index.html in vue.config.js while the second page has a filename of /second/second.html or second/index.html. Then, the folder named second will not be created, neither does the file /second/second.html which is in it.
Does anyone have issues similar to this before, really appreciate for the helps.
Also, I notice that when it was just pure vue.js, the assets such as images will be put into a separate folder in dist. But after vuetify.js is added to the project, the only folders can appear in dist is the js and css and fonts, those image assets will be store under the folder dist. I am not sure if it is a feature of the newest vue.js version, or it is also caused by configuration of vuetify.js. Thanks for the help.
I find that all the stylesheets and javascript code for the second page is generated in folder css and js, the only one missing is the html template.
During building the app, there are no errors about cannot create the folder. All it have be printing is the warning for the asset size since I didn't import assets by part, the prints are:
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
home (1.54 MiB)
css/chunk-vendors.c6dfe063.css
js/chunk-vendors.216b9b9d.js
css/home.429de16e.css
js/home.635f35e5.js
signup (1.53 MiB)
css/chunk-vendors.c6dfe063.css
js/chunk-vendors.216b9b9d.js
css/signup.d6876e84.css
js/signup.77b83ca7.js
The home is the index file, and the second page is referening to the signup page.
module.exports = {
pages: {
home: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'home'
},
signup: {
entry: 'src/pages/signup/main.js',
template: 'public/signup.html',
filename: '/signup/index.html',
title: 'signup page'
}
},
transpileDependencies: [
'vuetify'
]
}
As you can see, I put all the html templates in the public folder. And I wish all the built html files will be named as index.html under some certain folder so I won't see html from the url of my small project.
Related
I've got a website hosted on Vercel where I'm trying to use an image in the static folder as a favicon.
The static folder is in the root directory of the repository. Inside my nuxt.config.js file, I'm referencing the image like below:
module.exports = {
mode: 'universal',
router: {
base: '/'
},
head: {
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: `/images/meta/favicon.ico`
},
],
}
}
This works locally, but doesn't work with my production site which is hosted with Vercel.
I tried changing the href of the favicon to an image that is already online which worked, confirming that the issue seems to be with the local images in my app.
The Vercel output file structure from the build process looks as follows:
For some reason, all files outside of the '_nuxt' folder aren't able to be accessed - this is also the case for the files in the js folder and fonts folder (e.g. when I try to access https://hownow-git-dev-hownow.vercel.app/js/adhoc.js I'm getting a 'script not found' error).
Am I missing some sort of configuration setting to allow me to access these files?
I'm starting up a react project (using create-react-app) which will have multi "one page" components within. So, I assume, the directory structure for development would look like below:
/Project
/node_modules
/public
/src
/components
/layout
/popup
...
/pages
/dashboard
index.js
/profiles
index.js
...
If I build the project without any modification, it would bundle all the source code and resources under one directory. Well, that's not going to work for what I am trying to do for this project. I need to have different bundles for each page. So the bundles under the /public folder should look something similar to the following structure:
/Project
...
/build
/dashboard
/static
/css
/js
/media
index.html
/profiles
/static
/css
/js
/media
index.html
...
I looked at "Code Splitting" in webpack documentation. There's a good example with different entry points but I couldn't adapt it. How can I achieve the desired setup with webpack and react?
I would suggest to use React code splitting, using React Loadable, no need to modify Webpack configuration.
https://reactjs.org/docs/code-splitting.html
May be it is late to answer but I was facing the same issue and found a simple solution that I wanted to share.
I followed these steps:
Multiple entry points in webpack for each page
dynamic output bundle names for each entry point
Multiple html output files with different filenames using HtmlWebpackPlugin, also define particular chunks (bundles),
new HtmlWebpackPlugin({ filename: 'index.html',template: './src/index.html' ,chunks:['page1']})
Each template for each html page will have one div with particular id lets say root which is used by react app to render its app on dom.
Now every js entry point for each page will have
ReactDOM.render(<Page1 />, document.getElementById("root"));
Have a look at the Webpack docs on Multiple Entry files
And have a look at the examples in webpack's github
I followed the instructions in https://github.com/sahat/hackathon-starter to kickstart a user authentication system. The site runs on localhost and editing the html files modifies the page. However, I want to add and modify some existing css for the page, but it doesn't seem to load any changes I make in the public folder.
In app.js, static files are set by:
app.use(sass({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public')
}));
and
app.use(express.static(path.join(__dirname, 'public'), { maxAge: 31557600000 }));
when I do inspect element on the result page served from localhost, the sources for localhost:8080 contains the same files with same code, even though I modified these files in the public folder in my local directory.
I tried:
Add a new folder and css file in public/css to modify some html element
Modify the existing main.css file in public/css
deleting the whole public folder
comment out link(rel='stylesheet', href='/css/main.css') in views/partials/layout.pug, which does change the webpage(took out all styling elements, which makes sense)
I'm suspecting it's loading its public folder from somewhere, but I don't know how and where.
I'm trying to turn an existing ember app to electron app using ember-electron addon. When I run ember serve and ember electron, files in dist and electron-out/project/ember are getting generated newly.
But the assets in these folders are different.
I'm using fingerprinted assets.
The assets expected by index.html file in electron-out/project/ember aren't present in dist/assets folder.
In ember-electron/main.js, I have the lines -
protocolServe({
cwd: join(__dirname || resolve(dirname('')), '..', 'ember'),
app,
protocol,
});
and
const emberAppLocation = 'serve://dist';
From my understanding, there are separate assets compiled for ember-electron app whose index.html refers to ember-electron assets but trying to fetch them from dist.
What is wrongly configured here? Please help!
The problem: I use Webpack and I need to display part of my page in an IFRAME. The markup for the IFRAME's content is static and it includes a few JS libraries and some custom JS logic.
The idea: I wanted to bundle up all JS dependencies of the page rendered in the IFRAME alongside my other Webpack bundles and build the page itself as a static HTML asset that I can then reference from the host page as the IFRAME's src.
Method 1: I tried to use Webpack's file!val!html?attrs=script:src transform for my static HTML file.
Files
page/
lib/
- jquery.js
- ...
- page.html
- page.js
page.html
...
<script src="./page.js"></script>
...
page.js
const $ = require('./lib/jquery.js');
window.foo = () => { ... };
Webpack config
{
...,
entry: {
main: [...],
page: ['page/page.js']
}
}
This almost worked, since the JS bundle and HTML asset were indeed generated and I could require the latter on the IFRAME host page, but the linked bundle ./page.js failed to properly resolve as a URL (renders as [Object]). Tried file!val!html?interpolate with <script src="${require('file!./page.js')}">, which fails to locate the file altogether.
Method 2: Tried to use HtmlWebpackPlugin with the following config:
new HtmlWebpackPlugin({
filename: 'page.html',
template: 'page/page.html',
chunks: ['page'],
inject: 'head'
})
This too, almost worked, both the JS bundle and the page.html having been created. Contrary to the first method, JS bundle was properly linked here by the plugin. On the other hand, there seems to be no way to reference the generated HTML on my host page via require or any other reliable means.
Any suggestions would be much appreciated