I have created a THREE.js app using vite and node. When I am in my dev environment everything works perfectly, however, when I deployed this to Cloudflare pages using:
vite build
as my build command. The textures (images) are not showing but the shaders are. I am deploying it to cloudflare from github.
I am getting no errors in the browser console and no errors in the build log. Here is my folder structure
-images
-shaders
main.js
package-lock.json
package.json
style.css
vite.config.css
My Vite config file looks like this:
import vitePluginString from 'vite-plugin-string'
export default {
plugins: [
vitePluginString()
],
build: {
chunkSizeWarningLimit: 2048 // 2kb
}
}
The build option is to prevent a warning I was getting about chunk size but it makes no difference if I take it out, I thought that could have been the problem. Any help is much appreciated thanks!
This is the code I am using to import the assets.
function createMoon(radius, orbit, speed){
const moon = new THREE.Mesh(new THREE.SphereGeometry(radius, 10, 16), new THREE.ShaderMaterial({
vertexShader: moonVertexShader,
fragmentShader: moonFragmentShader,
uniforms: {
moonTexture: {
value: new THREE.TextureLoader().load('./images/moon.jpg')
}
},
}));
This code works fine on local dev server.
I put the images folder in another folder named public and removed the ./ where the images were being loaded in the code.
Related
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 am struggling with the deployment of a Vuejs front-end on my local IIS.
I would like to have my app deployed into a folder named FE_STB which is a sub-directory within my C:\inetpub\wwwroot folder.
Ideally, the URL to access the front-end would be http://localhost/FE_STB/.
In order to do so, I tried the following in vue.config.js:
module.exports = {
// Used to build the path for the css, js
baseUrl: process.env.NODE_ENV === 'production'
? '/FE_STB/'
: '/',
// The folder where the app will be built in the project directory instead of the default dist folder
// outputDir: 'Vue',
};
running npm run build generates an index.html, a favicon.ico, my img, js, css and fonts folders.
The index.html contains link tags such as (<link href=/FE_STB/css/chunk-05c5.672f5bfa.css />) and i thought it was going in the good direction.
However, it keeps returning a
404 not found error
when i try to access http://localhost/FE_STB/.
On the other hand, If I copy only the index.html into the root directory of my IIS installation (wwwroot) instead of the FE_STB subdirectory, and check the http://localhost/ URL, my app appears correctly.
However, when I start browsing the app and hit the refresh button, I get an error. For example, If I am on http://localhost/about/ on my app and refresh it with F5, I will get a 404 error as it’s looking for C:\inetpub\wwwroot\about\ directory which doesn’t exist obviously.
I also tried the web.config and the IISrewrite solutions as explained on the vuejs website or tried to add:
const router = new VueRouter({
mode: 'history',
// To define sub-directory folder for the deployment
base: 'FE_STB',
routes,
linkActiveClass: 'active',
scrollBehavior(to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 };
},
});
in my router.js but it doesn’t change anything.
Any tips or directions would be really helpful.
Thank you
S.
I'm doing a webpage with Vue (Vue-bootstrap) and I'm having problems to make it works. I'm uploading the content of the dist folder after using npm run build, the project was started using `vue init bootstrap-vue/webpack my-project. I've tried to add a vue.config.js file with the next information:
module.exports = {
baseUrl: './',
//...
}
I've try several times adding this in different folders before build it but I can't make it work.
The result just show the footer, it is in:
http://thegraph.es/Citython/
and the code without this vue.config.js is in the next link:
https://github.com/MGijon/Citython/tree/master/web
I recently finished creating a Vue app that I wish to deploy on the internet. However, I can only open the project using node and running npm run dev. If I double click on the index.html file, I just see a blank page. How may I deploy my website so that the browser can render my Vue app?
If you used the vue-cli to generate the project, you should be able to run npm run build and get a minified, single .js file.
See here: http://vuejs-templates.github.io/webpack/commands.html
This will give you a dist folder with index.html and build.js. You should be able to open the html file and see your app.
Hoping it's usefull for someone, still:
Using #vue/cli 3, I had a simular result when copiing the dist to my localhost/test.
The build assumed all js and css file relative to the root while I was putting them relative to a subfolder 'test'.
adding the publicPath : "" did the trick to get rid of the preceeding '/'
in vue.config.js I added : ( using proxy for dev with apache/php )
module.exports = {
devServer: {
proxy: 'http://localhost:80/proxy'
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
output: {
publicPath : "" // only for prod
}
} else { // dev
// org, no changes
}
}
}
See also
https://alligator.io/vuejs/using-new-vue-cli-3/
https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config
I'm getting an error when running my react app: Uncaught SyntaxError: Unexpected token import
I know that there are a plethora of similar issues on here, but I think mine is a little different. First of all, here is the repository, since I'm not sure where exactly the error is: repo
I'm using create-react-app, and in a seperate backend directory I'm using babel (with a .babelrc file containing the preset es2015). The app worked fine until I added another file in a new directory in the backend folder (/backend/shared/validations/signup.js).
I was using es6 before that too, and it was working perfectly fine. First I thought it was some problem with windows, but I cloned the repo on my Ubuntu laptop and I'm getting the same error there.
Some things I tried already:
Move the entire folder from /backend to the root folder
Move just the file (signup.js) just about everywhere
So no matter where the file is, the error stays the same. If I remove the entire file and all references to it the app works again.
I think this error is pretty weird, considering I'm using es6 everywhere else in the app without trouble. It would be great if anyone could help me with this error.
edit: If you want to test this on your own machine just clone the repo and run npm start in the root folder (and also npm start in the backend folder, but that isn't required for the app to run, or for the error to show up).
That's what's happening:
Your webpack is set to run babel loader only in the src folder (include directive).
To change that, one approach is:
1) extract webpack configuration with npm run eject (don't know if there is another way to override settings in react-create-app). From the docs:
Running npm run eject copies all the configuration files and the
transitive dependencies (Webpack, Babel, ESLint, etc) right into your
project so you have full control over them.
2) in config/paths.js, add an appShared key, like that:
module.exports = {
/* ... */
appSrc: resolveApp('src'),
appShared: resolveApp('backend/shared'),
/* ... */
};
3) in config/webpack.config.dev.js, add the path to the babel loader, like that:
{
test: /\.(js|jsx)$/,
include: [ paths.appSrc, paths.appShared ],
loader: 'babel',
/* ... */
},
It works now!