How to deploy to vercel static files? only html, css and js - javascript

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.

Related

One of my js files is not being bundled in my production build (dist folder)

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.

Why can't I preview Vue project locally?

From the Vue CLI https://cli.vuejs.org/guide/deployment.html, it stated that the dist directory is meant to be served by an HTTP server. But why can't I preview it from the index.html? Cause my understanding is that Vue is just a front end JavaScript framework, so one should be able to preview it from any browser. If am to create a simple vue project using a cdn, it can be directly previewed on the browser. But this is not the case for the vue project created through the CLI. Can someone explain this.
Take a look into the Chrome Dev Tools. You will see a couple of errors similar to those:
As you can see, there are a bunch of files that fail to be imported. This is because these files are not imported using a relative file path, but an absolute one (starting from root, as visible by the prepended / in all files in the index.html).
If you run a local server from the dist directory root will resolve to this directory, allowing the files to be imported properly and your site to be visible in the browser.
However if you simply open the index.html file in your browser, / will resolve to the root of your operating system, which does not contain the files. If you were to copy all those files into the root of your OS, so that the paths would resolve successfully, you would not need a server to view your Vue application.
CLI projects are built with the use on a server in mind. The idea is to just be able to deploy the files in the dist directory to a server and have a working Vue application.
Just to add to a great answer from #aside.
You can use a publicPath configuration option of Vue CLI and set it to '' or ./ - this should be enough to make it work from file system
The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.
vue.config.js
module.exports = {
publicPath: ''
}

Why my React app is not loading correctly (broken) in localhost?

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.

Parcel build issues when importing all modules on remote hosts

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.

Images or JS not showing on Magento 2 installation

I've just installed Magento 2 onto my production server under a
development. subdomain. The install appeared to have been successful
but I've noticed there are no images or working javascript in both the
frontend and the backend.
After inspecting the source code, I found that files being called in
such as
http://dev.website.com/pub/static/frontend/Magento/luma/en_GB/css/print.css
don't actually exist. Any thoughts? I tried solutions on several
stacks but haven't had any luck.
Try this Before that take Backup
Remove everything, except .htaccess file from pub/static folder
Open up app/etc/di.xml find the path “Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink” and replace to Magento\Framework\App\View\Asset\MaterializationStrategy\Copy
Note: Remove entire files and folder under pub/static except .htaccess file.
For More info ref this http://www.dckap.com/blog/magento-2-admin-links-not-working-in-windows/
Other Solution
You can run below command from Magento root folder.
php bin/magento setup:static-content:deploy
This will download the content perfectly in respective folders.

Categories

Resources