I want to use Svelte in my next project, due to its clean syntax and how nice is to work in it. Unfortunately, to deploy the app in my company I can't use node or anything like that on the server. I can only serve the app from nginx as static files.
Is it possible in svelte? I can't find anything that would allow me to do that, all solutions I've tried like #sveltejs/adapter-static didn't seem to generate it correctly to use it in this way. I can't find any guide on how to do that on the web.
In order to pre-render a SvelteKit 1.0 static site you need to:
Add to devDependencies in package.json (you can remove the default adapter-auto):
"#sveltejs/adapter-static": "next",
Run npm install
Add the following line to src/routes/+layout.js - create the file if it does not exist:
export const prerender = true;
Run npm run build
The static files will be generated in the build directory.
More details at https://github.com/sveltejs/kit/tree/master/packages/adapter-static#sveltejsadapter-static
If you aren't using SvelteKit, you can just copy contents of /build/ generated by npm run build. This should work.
I think Libertas' answer posted a couple of weeks after this is most likely what you're looking for.
But I'll leave the below here anyway in case it's useful to you or someone else coming along later:
SvelteKit (from the Svelte core team) supports server-side rendering, and documents generating static sites:
Static Sites
Most adapters will generate static HTML for any prerenderable pages of your site. In some cases, your entire app might be prerenderable, in which case you can use #sveltejs/adapter-static#next to generate static HTML for all your pages. A fully static site can be hosted on a wide variety of platforms, including static hosts like GitHub Pages.
(my emphasis)
Related
I'm working on a project where they chose to use nextJS as a client side tool, but I want to deploy the client as static code somewhere else.
Doing a build creates a folder with all the nextJS proprietary server stuff.
Is there a way to make a normal build to just static react files? I don't want SSR or any of their EEE stuff.
I know Vercel is a VC backed mousetrap, so it's not really in their interest to make it easy to extract yourself, but hoping we don't have to rebuild the site to get out of this.
Update your build script in package.json to use next export:
"scripts": {
"build": "next build && next export"
}
Note: this feature does not support the following:
Image Optimization (default loader)
Internationalized Routing
API Routes
Rewrites
Redirects
Headers
Middleware
Incremental Static Regeneration
fallback: true
getServerSideProps
If you are using any of the features listed above, you will have to stick to prerendering individual pages, which Next automatically does for you.
Source: Docs
Sounds like you are looking for the next export. Should do just that, but there are some limitations. Documentation is here: https://nextjs.org/docs/advanced-features/static-html-export
I'm afraid this will be a stupid question. But I don't manage it to use my JS-Package (for example jQuery), which i have installed with Visual Studio Nuget-Package-Manage in my .net 5 Blazor Server-App.
What i did:
Installing the Package. Here I installed jquery.datatable which includes jQuery itself:
Image of my Project
But now, i don't know how to include it for example in my "_Host.cshmtl"-File:
<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>
Where is my *.js-File? For example: query.dataTables.js ??
I found it on "C:\Users\xxxxx.nuget\packages\jquery.datatables\1.10.15" and
"C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"
Do i realy have to copy it to my wwwroot-Folder manualy?
If so, why i should use the package-manager?
Thanks for your help!!
Traditional web applications using JavaScript normally load the file from a local folder or from a web CDN (e.g. CDNJS.com etc). This is then loaded from the page (often referenced from a layout file).
Early on it used to be the case that JS libraries could be loaded via NUGET packages but this approach is now discouraged. It had to fix the creation of the script in a set location, e.g. /Scripts and there was no flexibility. Almost all client-side libraries are now in NPM as packages or on CDNs like cdnjs.com.
The current approach for .NET web apps to load client-side assets is either use LibMan or NPM and have some sort of webpack arrangement to compile/pack/copy. You would never load the JS from a /packages folder in the way you suggested.
Blazor Approach
Blazor (since .NET 5.0) can load either embedded JS modules (from your code), or from a URL directly.
If you want to package some JS with your application you should look at Razor Component libraries. This allows static assets such as JS files to be embedded in the code, which Blazor makes available via the _content route, e.g.
_content/LibraryName/myfile.js.
Because Blazor is a SPA you don't include JavaScript using a <script> tag in your HTML, you should load it as a module and reference it there.
This documentation explains it:
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references
DataTables, JQuery
So should you include jquery.min.js and jquery.datatables.min.js in your library? I'd suggest a better approach is to load from a CDN - your package is smaller and there is a chance the URL is already cached and loaded, e.g.
var module = await js.InvokeAsync<IJSObjectReference>(
"import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");
This loads the module on-demand from the URL directly. You'd also need to load jquery before this.
Finally I'd make this observation: are you sure you want to go down this route?
There are several native Blazor libraries on NUGET for rendering and handling tables. You'll find it much easier to go this way rather than try to patch jquery-based libraries into a Blazor app.
I had a similar issue. Not with the same libraries, but I was wanting to do something that wasn't available in a Blazor library yet. I needed a video player that could handle a certain format that the default HTML 5 video element can't handle. There is an open source player, videoJS , that did the job, but it's a javascript library. It's available on npm and there are cdn's - however the plugins (as far as I could tell) weren't on CDN - so I had to go down the npm route.
When you install an npm package it puts it into a hidden node_modules folder. Unfortunately even if you point to that path or even copy the file in with your other js files it won't work. Npm packages are designed to be run by nodejs, rather than directly in the browser. In order for them to run in a Blazor app (in the browser) you have to do an intermediary step of transpiling it into a browser friendly format.
What I really wanted was a re-usable component, that wrapped the javascript.
It took me a while to get there but I finally figured it out. I've written a series of articles on my blog detailing it. The final one ports everything into a Razor Class library that can be consumed with no knowledge of the underlying js. The fourth article deals with importing npm libraries and using them within a web assembly app. I'll put the link below but essentially the process is:
Create a folder eg JS and initialise it for npm (npm init -y)
Install the required npm packages (npm install --save)
Create a src folder within the JS folder that that you will put your own js files in
Create an index.js file in src that imports the required javascript modules and exports what you want to consume
Install snowpack (npm install snowpack --save-dev) (or webpack but I found snowpack seems to work better)
Configure snowpack to process the contents of the src folder into wwwroot/js (without snowpack or similar the files in the npm package won't be in a browser or blazor useable format)
use javascript isolation to pick up your index.js file from wwwroot/js
See blog post here for full details (It's part 4 of a 5 part series - part five puts it all in a razor class library so you can add it to a project without ever seeing the javascript)
I know this is late but this SO question was one I kept coming across when searching on how to do what I wanted, so thought I'd put my solution here in case it helps anyone else searching for what I did.
I want to export the rendered HTML files with its resources to a zip file in order to share it via mail but i could not find any solution for this usecase. Could you please guide me how to proceed?
The web application is developed using Angular8.
Sure. I guess you had a code test or something: just build your project for development, compress the /dist folder and send it as a compressed file of your choice. Type and execute:
ng build
In the project main folder. Notice that --watch doesn’t help here, since you don’t need a CI/CD. Check the official documentation for more details.
In all the articles that explain how to use create-react-app with electron (eg : https://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer ) , they mention that electron.js file should be placed within public folder.
I want to have typescript definitions for this electron.js too (since i am using typescript for the react app also). How do I do this ?
I have spent quite a bit of time working on an electron project as well as creating a starter kit for using Electron + TypeScript (very strict) + Create React App (non-ejected). I think you might find it useful as a starting point, even though there might be some additional tooling that you might not need.
Check out the electron branch of Foldable for more details. Of particular interest would be src/electron.ts, package.json and the public dir.
To quickly give you some additional points that might be useful in your question:
One can configure the entry script for Electron in your package.json under "main"
You will need to use TSC or another typescript compiler to handle the "main-thread" or node portion of Electron. This is separate from CRA. Alternatively you can use plain javascript for a simpler setup.
The only thing in my public folder is the html file minus the javascript imports (because they are injected automatically)
I'm trying to work out the correct way to embed an AngularJS application into another web page (served by another app). I have two apps, running on different servers:
App 1 - PHP app
App 2 - AngularJS app (calendar widget of sorts)
The PHP app is the primary app, into which I want to embed the calendar, which is served from a remote server. I have full access to both servers, and to both apps. The idea is that I want to be able to re-use the Angular app elsewhere, so it needs to be as loosely coupled as possible to the PHP app, preferably embedded in a single line of code.
I am currently using a HTML5 tag, which seems to work well, but I was wondering if there's anything wrong with this approach, or if there's a better means of doing what I'm after.
I should mention that I'm happy to use a HTML5-only solution, I'm no worried about backwards compatibility with older browsers.
No iFrame solutions, unless there's a REALLY valid solution. My ultimate goal is to head towards a microservice-style architecture.
Thanks in advance for your help.
I generally manage all of my client-side dependencies with Bower but you could use any package manager.
This is how I would do it with Bower, which just uses Git to pull down your dependencies. This solution would require you to know how to use Git.
Install Bower—see above link.
Then, create a file called bower.json at the root of your project that points to the Git repository of your project:
{
"name": "my-php-app",
"version": "0.0.0",
"dependencies": {
"my-angular-app": "git#bitbucket.org:MY_BITBUCKET_ACCOUNT/my-angular-app.git#master"
}
}
Then you can run the following command in the root of your PHP project:
bower install
This will create a directory called bower_components at the root. You can configure the default directory.
Your application should be self-contained there. You can import it and all of its dependencies with PHP on the required page.