Experimenting with Three.js within a React application, I've prototyped an example that works locally; however, fails to load remotely from static hosts such as GitHub or Amazon S3.
If I run my GitHub project locally, it works:
$ parcel index.html --open
However once I build a distributable and push to my GitHub Pages, the script fails to execute - just a blank page. All CSS and JavaScript are being loaded, but no errors are present in the console.
$ parcel build index.html --public-url '.'
Strangely, I can use serve on the exact same build and it works locally.
My initial thought was just paths, to which I added --public-url '.' to my Parcel build command. All scripts seem correctly pathed, and loaded.
It seems like the issue may stem from importing all modules as:
import * as THREE from 'three';
It may be coincidence, but I have another GitHub project that exhibits the same problem on GitHub Pages when importing all modules. To sanity check, I do have React projects using Parcel that build and deploy without issue.
Percel did not support periods in the name.
As in: username.github.com wouldn't work.
This has sense been fixed, per GitHub issue #2093.
Related
I am creating a Vue app (using Vite), and I like to have my .js functions in different files inside a scripts folder. I have started recently so for the time being I only have one .js file appart from the main.js that comes with Vue.
When I build the application to deploy it, it seems that this .js file is not included in the bundle, so the deployed app cannot use it's functions.
How could I make the npm run build command include this local .js file that I am using (and it works when running the app in localhost), so that the deployed app works as expected? Am I missing something in where local files should be put inside the project files tree?
I have checked other questions regarding this, and also the official documentation, but maybe due to my lack of experience with Vue I haven't found the answer or haven't understood it.
I found a solution - read my first answer.
I am trying to deploy a repository from my github.
The project contains some static files:
├─js
│ ├─form.js
│ ├─logic.js
│ └─anotherFile.js
├─index.html
└─styles.css
After I deploy the project (without choosing framework - choosing "other") I get 404 (Failed to load resource) when I enter the project from the new domain.
Just to mention, the project works fine locally when I open the index.html file.
Since I used import statements inside my javacsript files it caused some problems when trying to access them when openning the index.html.
I used webpack to solve that issue so I will use the build output. In vercel platform I chose the OUTPUT DIRECTORY option as the relevent build output - dist in my case.
I found what has helped me when deploying static files is creating another folder inside the root directory. And then put all the files in the newly created folder.
I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification
I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.
I have an Angular application which is build with the Angular-CLI. I want to deploy this project to a Spring-Microservice. When i deploy the build, which generated with the cli-command ng build --prod the application works fine.
But: I want to deploy the Original files including my typescript files to the Microservice so i can see where my console-logs come from (which line in which file, just the same as when i run the application locally with "ng serve").
A few months ago, i had a Angular-project which i started with the Angular Quickstart. I ran this project with NPM (commands: npm install and npm start). This project transpiled the typescript-files to javascript, and for this reason, this project is deployable and works fine.
But my CLI-project dont do that, so it is not deployable.
How can I deploy my application as described?
In this presentation, I generated an Angular project with CLI, generated a REST server using Spring Boot, and showed how to deploy this Angular app under the Spring server https://youtu.be/k8r76d8QzXs?t=870.
To be able to debug your Typescript code with prod bundles, use add the --sourcemaps option:
ng build -prod --sourcemaps true
When you build an Angular project with the production flag the Angular CLI creates and the sourcemaps (you can identify them from their extension .map.js) of the minified Javascript files.
The easiest way to go is to deploy all the generated files.
When you open the developer tools of the browser to debug them the browser recognize them, and generates the unminified Javascript files. You can find them on Sources Panel. (e.g. Chrome)
So you don't need the original Typescript files
I am not sure, if you can see on your console when you log something, the exact file and line where the original code is, from a minified Javascript file.
I've searched all over google and checked out the official docs for Webpack but have not had any luck finding a tutorial/guide/plugin to even do this. Has anyone done this before or should I just drop webpack altogether and go for a grunt-maven-war file generator instead?
Well, there is nothing special in building spring-boot with webpack. You can install node globally, you can install it during build...
You just add plugin to pom.xml to run node command i.e. (https://github.com/eirslett/frontend-maven-plugin)
And that actually it. It runs webpack and you get your js, css, fonts, ... files in some folder. Now you proceed like it is usual static assets, pack them into war and enjoy.