I followed this a link to try to configure Twitter's boostrap.less under Node 0.6.12 and Express 2.5.8:
app configuration:
app.use(express.compiler({src: publicDir, enable: ['less']}));
app.use(express.static(publicDir));
stylesheet link:
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
boostrap.less is the vanilla bootstrap.less file from bootstrap 2.02. the code section of it starts with:
// CSS Reset
#import "/public/stylesheets/reset.less";
When node is fired up and the page requested, the less paths get resolved correctly but the less parser throws an error:
../node_modules/less/lib/less/parser.js:385
throw new(LessError)(e, env);
The error causes node to crash after returning a 500 error for the contents of the boostrap.css file.
Any ideas how to get bootstrap.less to work in my setup?
Just a thought, but if you have Twitter's bootstrap.less via a git submodule, do you need to update the submodule? (we made that mistake, and had the same error as you until we realized it and fixed it)
Related
When I npm run dev my SvelteKit / vite app locally, after a minute or so, a full hot module reload is triggered which leads to break my design.
Stacktrace example:
23:09:37 [vite] page reload .svelte-kit/generated/nodes/8.js
23:09:37 [vite] hmr update /.svelte-kit/generated/root.svelte
23:09:37 [vite] page reload .svelte-kit/generated/server-internal.js
23:09:37 [vite] page reload src/declarations/cmc/cmc.factory.did.js
23:09:37 [vite] hmr update /src/frontend/src/lib/components/guards/IdentityGuard.svelte
etc.
I am not sure is the issue is linked to the fact that my global style is not correctly reloaded (I'm using sass) or the fact that weirdly some raw script Svelte components are injected into style tag in the dom
e.g. I find following tag in the dom
<head>
<style type="text/css" data-vite-dev-id="/Use...CollectionEdit.svelte?svelte&type=style&lang.css">
><script lang="ts">
import type { PermissionText } from '$lib/constants/rules.constants';
etc.
</script>
</style>
Another thing that is weird to me is that vite often detects changes in tsconfig.json and triggers new build even though the file has not changed in weeks
23:09:37 [vite] changed tsconfig file detected: /Users/.../admin/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
Any clue or idea what I can track to solve this issue?
Alright solved it or at least find a workaround. The issue seems to have been linked to the fact that my Mac triggers incorrect refresh through fsEvents. Even tough there are no changes on the local file system, it requests full reload after 1-2 min. Disabling fsEvents in the vite.config.ts prevents this to happen and per extension, avoid the problem.
server: {
watch: {
useFsEvents: false
},
}
Why sass is not intepreted on full reload is to me unclear but, at least there is no more issue and hmr still works.
I need two compiles to achieve server-side rendering with React. I have spent many days trying and it does not work. With Parcel 1 it worked perfectly. My problem is that after compiling it tells me that Node does not recognize the css that it is going to send to the client. In parcel I just put --target = node6 and everything worked great. Help !!
Here is my actual package.json:
Here is the error:
SyntaxError: Unexpected token '.'
at Object.compileFunction (node:vm:352:18)
dist-server/index.css:1
.line-total{border-top:2px solid #0}
This might be a bit of an onion-peeling exercise to get everything working, but I think I found the source of the first issue, and I can give you some tips about where to go from there.
Here's an overview of what is happening:
Your build:server command is telling parcel to bundle your server located at server/index.js
Your server/index.js file has a line that imports your client app code:
import App from '../src/App.js';
App.js imports a .css file.
So when you go to run the server bundle with node, the first thing it does is try to require("ouput-css-file.css"), which chokes because it's not javascript.
You could fix this first layer of errors by instead importing the .css file in your src/index.html instead of src/App.js:
<link rel="stylesheet" href="./App.css"></link>
That should get you past the problem mentioned in your question, but it looks like you'll hit another layer of (unrelated) errors in your server/index.js file - you need to correctly reference the ../dist files from the client bundle output, and actually import the renderToString method, were the first that I hit, but it keeps going.
You might want to take a step back and try to get the server code working without parcel (while still using parcel to generate the client bundle) and then addd parcel back to the server build process after you're sure you've got it working.
I'm working on a Flutter Web App and today I got these errors:
A bad HTTP response code (404) was received when fetching the script.
Uncaught (in promise) TypeError: Failed to register a
ServiceWorker for scope ('https://adrieldf.github.io/') with script
('https://adrieldf.github.io/flutter_service_worker.js'): A bad HTTP
response code (404) was received when fetching the script.
The only thing "different" that I added to the code was a dependency for the Share library, but I don't think that that is the problem.
Here is the interesting thing, I've got the app hosted on Github Pages and after every commit I have a action that builds the web app. After the build, when I try to access it doesn't load and the errors appears. But building it and running it locally works normally.
Here is the source code if you want to check: https://github.com/Adrieldf/allthewidgets
The website link is in the repo description.
I solved my problem by changing the index.html file
from
<base href="/">
to
<base href="/directory_name/">
Looks, like you are trying to run the project from the project_root/web folder.
If you just start a webserver here (for example, by using python -m http.server 8088), the application will start and even will be working partially.
But compiled web app located in project_root/build/web. Try to run your webserver in that folder.
Solved by
changing base tag inside build/web/index.html
<base href="/">
to
<base href="./">
added . (dot)
Well, the problem is what the error message says. Your JS is trying to register a Service Worker from the script 'https://adrieldf.github.io/flutter_service_worker.js' but that does not exist on the server. If you open that URL it's a 404.
For me got resolved simply after upgrading flutter packages:
flutter packages upgrade
flutter create .
flutter build web
and use the project/build/web as server's location
you can use peanut to build your flutter app and copy it to gh-pages project using something like:
peanut --extra-args "--base-href=/directory-name/"
Solved by changing base tag inside build/web/index.html
<base href="/">
to
added . (dot) with the folder name inside which i added my flutter build
<base href="./flutter/portfolio">
If your PC web and Mobile web are different, you can try to upload flutter_ service_ worker.js in your PC web
I'm very new to Polymer. i read this official polymer documentation and downloaded a code sample and ran it using polyserve without modifying the code.I followed instructions given in polymer-project website. I installed every required components but after running polyserve command, it shows a page with 'Not found' text. Please help me.
I've installed npm 3.3.6,node v5.0.0.,gulp 3.9.0 and bower 1.7.7. All the commands are running fine without any error. I can't understand what exactly is going wrong.Am i missing something?
Polyserve output
Start server and try: http://localhost:8080/components/icon-toggle/demo/
Your folder structure should look like this:
[folder-path]/polymer-first-elements
README.md
bower.json
bower_components
demo -> contents: icon-toggle-demo.html & index.html
icon-toggle-finished
icon-toggle.html
Make sure the default port used by polyserve (3000) is not busy,you can use polyserve -p 8000 to try other port
You don't say what URL you are trying to access in the browser, but the sample code doesn't have any index.html file at its root, so accessing it there will fail.
There is an index.html in the demo directory, so you might have to add that to the url to access it.
I found I needed to add the following line to the <head> element of /demo/index.html:
<link rel="import" href="/bower_components/polymer/polymer.html">
Then view http://localhost:8080/demo (note the trailing "demo").
We are using yeoman for our dev process and currently using the "grunt server" command to run the grunt connect web server for local development. Every time we save a file, grunt will run all its tasks and reload the browser.
The problem is with Server side includes we use to include the header and footer. We had it previously working with Apache, IIS and Tomcat but have no idea how to get connect to do the same. It just treats it as an html comment.
eg include:
<!--#include virtual="header.html" -->
So,
1. Is there a way to get grunt/connect to include these files?
2. If not can we use Apache with yeoman/grunt?
3. If all fails, is there another way to include files with connect?
You can have express handle SSI with the help of the ssi node module.
I put together a github repo with this simple example: https://github.com/sfarthin/express-ssi-example .
I deployed this app to heroku so you can see it in action: http://intense-basin-9464.herokuapp.com/
app.use(function(req,res,next) {
var filename = __dirname+(req.path == "/" ? "/index.shtml" : req.path);
if(fs.existsSync(filename)) {
res.send(parser.parse(filename, fs.readFileSync(filename, {encoding: "utf8"})).contents);
} else {
next();
}
});
you can easily use connect-ssi:
https://github.com/soenkekluth/connect-ssi
I also used the ssi module for that.
for now I includes are only allowed for .shtml files. 'will change that soon.
Thanks a lot for all your help #steve-farthing and #soenke I finally ended up using a much simpler solution which was to install Apache with SSI enabled and add the following JS tag to the footer.
<script type="text/javascript">
document.write('<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script>
Now when we run grunt serve we still need to manually navigate to http://localh0st/app/ but everything else seems to work fine after that.