ERROR: Deploy VueJS App in Firebase Hosting - firebase

I have a vue application, I install firebase tools and upload the application to firebase hosting, the first time all done and I make npm run build and firebase deploy, but when I realise any change, and later do npm run serve or build or firebase deploy I have the next error:
Template execution failed: ReferenceError: features is not defined
ReferenceError: features is not defined
- index.html:4 eval
[.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:4:10
- index.html:7 module.exports
[.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:7:3
- index.js:284 Promise.resolve.then
[real]/[html-webpack-plugin]/index.js:284:18
- next_tick.js:188 process._tickCallback
internal/process/next_tick.js:188:7
Any idea? I don't know why this problem succeed. Thank you.

When you installed firebase tools, it generated a public folder for you. Inside that public folder, there is an index.html file(this file is the cause of the error). Just delete everything inside that index.html file, then replace with your own content.

In firebase.json file in hosting change "public": "public" to "public": "dist"
When you installed firebase, it changed the file public/index.html, the original version looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>hello-world-vuetify</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but hello-world-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Replace the content, it worked for me

Related

Loading static resources with custom directory structure in spring boot application

I have a spring boot application that contains static resources in the structure indicated below ( + indicates directories, - indicates files)
+ my-app
+ src
+ resources
+ static
+ v1
+ css
- app.css
- main.js
- index.html
I have sub-directory that contains the application bundles. By default, Spring looks for index.html directly under resources/static directory. It does not find one in this case.
My index.html looks something like this
<html>
<head>
<script type="text/javascript" src="main.js"></script>
<link type="text/css" href="css/app.css"/>
</head>
<body>
</body>
</html>
Let us assume the application is hosted at http://myapp.com.
I have two questions here
How can I make Spring to look for v1/index.html under my static resources, when I access the application the URL http://myapp.com?
If I load v1/index.htmlby adding a view controller in ViewControllerRegistry, it does load index.html under v1 directory, but gives 404 on all the resources used by index.html (main.js & css/app.css).
How can I tell Spring to get all resources from resources/static/v1, instead of resources/static.
I created a basic Spring Boot Project in STS and did not any dependencies. I used your html sample from above and modified it to this:
<html>
<head>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" href="/v1/css/app.css"/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I created the directory /src/resources/static/v1 and /src/resources/static/v1/css, placing the index.html file in the ../v1 directory which worked. The app.css file contained the following for testing purposes:
h1 {
color:red;
}
This worked without any configuration changes to Spring. If you are using Thymeleaf, JTwig, JSP... you may need to add resource handlers or tweak settings for those template engines, I can't comment since I didn't use a template engine based on your example. Anything in the /static directory will be referenced without the /static.
I hope that helps, if it does please mark the answer as the right answer.

Codecept run provides different result on travis than in local

I am running some codeception tests. They are successful when I launch them locally.
For integration tests, I add them on Travis, but a lot of test failed!
So, I add this command on .travis.yml: cat tests/_output/*
The result explain why tests are failing. Here is the output of a page on travis environment:
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
[THE FORM]
</body>
</html>
As you can see, my base template is not loaded on travis environment.
Here is a truncate part of the same login page locally generated:
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="/css/f5f986f_app_1.css" type="text/css" rel="stylesheet" media="screen" />
<link href="/css/f5f986f_bootstrap.min_2.css" type="text/css" rel="stylesheet" media="screen" />
<link href="/css/f5f986f_bootstrap-theme.min_3.css" type="text/css" rel="stylesheet" media="screen" />
<link href="/css/f5f986f_font-awesome.min_4.css" type="text/css" rel="stylesheet" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/52ec12c_jquery.min_1.js"></script>
<title>G-Equip • Log in</title>
<link rel="shortcut icon" href="/favicon.ico" /> </head>
<body>
[....]
[THE FORM]
[....]
</body>
</html>
Here is my test:
class AuthCest
{
public function _before(FunctionalTester $I)
{
$I->amOnPage('/login');
//Menu verification
$I->seeInTitle('Log in');
}
}
So, in local the page is well loaded with its template. But on Travis, I don't have my full template, I don't have the title tag! So, this test failed on: $I->seeInTitle('Log in')
Codeception throw this failure:
Fail Tag element with <title> was not found.
Why the views are different on travis environment?
Here is a simplified version of my .travis.yml file:
# Project language
language: php
# Allows use container-based infrastructure
sudo: false
# Start mysql service
services:
- mysql
# Cache composer packages so "composer install" is faster
cache:
directories:
- $HOME/.composer/cache/files
php:
# aliased to a recent 7.1.x version
- 7.1
# Define an environment variable
env:
- SYMFONY_VERSION="3.3.*" DB=mysql
# Update composer
before-install:
- composer self-update
before_script:
- cp app/config/parameters.yml.travis app/config/parameters.yml
- composer install
- mysql -e 'create database symfony;'
- php bin/console doctrine:migrations:migrate --no-interaction
# loading data for phpunit and codeconcept tests
- php bin/console doctrine:fixtures:load --fixtures ./src/AppBundle/DataFixtures -n --env=test
script:
# Server must be started for codeconcept tests.
- php bin/console server:start
- php vendor/bin/codecept run
- php bin/console server:stop
- cat tests/_output/*
Something is certainly misconfigured, do you have an idea?

Issue loading CSS and JavaScript files in Laravel

I'm having a strange issue in my Laravel 5.2 app. Specifically with loading some CSS and JavaScript files. I have this in the folder public/assets so, I have something like this:
|--public
|----/assets
|-------/css
|------------/auth
|---------------login.css
|----------main.css
|-------/js
|---------email.js
|---------/modules
|------------faq.js
That is my directory, so I'm loading the CSS with:
<link href="{{ URL::asset('assets/css/main.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/css/auth/login.css') }}" rel="stylesheet" type="text/css" />
And the JavaScript files with:
<script src="{{ asset('assets/js/email.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/modules/faq.js') }}" type="text/javascript"></script>
Also I'm loading another files as well but I'm explaining the basic situation. So, the thing is that the load of login.css and faq.js are giving me 404 error but the other files are loaded correctly, I even checked open the files through the absolute paths and they're loaded fine, also I made chown to www-data of the public folder but nothing works, so I don't know why a 404 error is triggered. What else should I check?
In the console of the browser the links that are loaded are:
http://mydomain/assets/js/modules/faq.js
http://mydomain/assets/css/auth/login.css
But they give 404 error, and the other files doesn't
first check those 404 files are in there definitely
check those files have readable permisstion

Resource interpreted as Script but transferred with MIME type text/x-c++

LESS beginner.
Wrote a test html below
<head>
<link rel="stylesheet" type="text/css" href="404.less">
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>test</body>
But got a warning in Chrome
Resource interpreted as Script but transferred with MIME type text/x-c++: "http://lesscss.googlecode.com/files/less-1.3.0.min.js".
Why?
You probably want your link tag to say:
<link rel="stylesheet/less" type="text/css" href="404.less">
That said, if this is being served from a webserver it could be that that's detecting the mime type wrong from the file extension. If it's an apache server though, there's an easy fix. Add this to/create a .htaccess file in your webroot, containing the line:
AddType text/css less
I had a similar issue with twitter follow-me buttons when I was reviewing local html files in chrome. To fix this I just fired up web matrix 2.0 and pointed at my folder. Hope this helps.

CSS 404 error using Django

CSS link:
<link rel="stylesheet" href="/site_media/style.css"
type="/text/css" />
I'm getting a -404 error while loading my CSS sheet.When I try to debug the location thru Firebug(Firefox), I get the below location.
"C:\Python27\Djangoprojects\django_bookmarks..\django_bookmarks\site_media\style.css" does not exist
Site_media is determined by the Python code in URLS.py
site_media = os.path.join(os.path.dirname(__file__), 'site_media')
Why do I get the ..\ in the location?

Resources