I'm trying to learn how to deploy a Stencil web app using a web server like Ngnix but I can't make it work on localhost. I suspect there is no entry point for the minified build.
As an example, I'm using the stencil starter app.
In my stencil.config.ts file, I have opted-in for the "dist" output target.
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/',
},
{
type: 'dist'
},
]
For the minified build I am running the command:
npm run build -production
The generated "/dist" folder does not contain an index.html file and this prevents me from being able to serve it using Ngnix.
The contents of the dist folder
I would expect that the generated "/dist" folder would contain an "index.html" file that could be served as an entry point to a web server.
What am I doing wrong?
Is there anything I'm missing?
The dist output target is meant for including in existing pages.
To generate a website you can use the www output target (in the www folder). This will also give you access to website-specific options, like a service worker.
The docs state:
The www output target type is oriented for webapps and websites, hosted from an http server, which can benefit from prerendering and service workers, such as this very site you're reading.
For anyone who comes across this in the future, I found the solution.
I was supposed to use the "/www" folder for deployment as that's the way it's supposed to work for standalone web apps, and it contains an "index.html" file.
Here is the documentation
Related
I have a project in Next.js. I have that upload files and share that in public URL to this project.
With npm run dev first I uploaded files to public folder and it worked fine, but when I change to npm run start and upload files, the files upload to public folder but with URL http://mydomain/fileuploaded.jpg it did not show, is rare but it's there.
I searched on the Internet but I didn't find a solution for this problem.
From Next.js documentation:
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
You'll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time.
Alternatively, you could setup your own custom server in Next.js, which would give you more control to serve static files/assets.
You can also achieve something similar using API routes instead. See Next.js serving static files that are not included in the build or source code for details.
a bit late but if someone need the same.
If your goal is to upload and get picture from your next server, you can instead of using the Next router, getting the image by yourself by create a route /api/images/[id] where [id] is your file name and you manually with fs send the picture back.
something like:
const file = await fs.readFile(`./uploads/image.png`)
console.log(file)
res.setHeader('Content-Type', 'image/png')
res.send(file)
Try and use nginx or another webserver to serve the public directory. That way it will serve newly added files without having to write extra code to serve files in nextjs.
server {
/images/ {
root /var/www/site/public
}
}
After reading this article and this one can not handle Serve files in web root (.net core 3.1).
There is a CB folder in the webroot folder and I can browse any txt or png file it works fine but when I want to download an apk file it doesn't work and browser message files not found.
this is my folders structure:
-wwwroot
-CB
myfile.apk
installed “Microsoft.AspNetCore.StaticFiles” and used:
app.UseStaticFiles();
tested URL:
http://localhost:51405/cb/myfile.apk
From the second article, it explicity states to configure UseStaticFiles() options via its parameter and specify that static files should be served even if the file type is unknown.
app.UseStaticFiles(new StaticFileOptions
{
ServeUnknownFileTypes = true
});
Like the article states, however, this is a pretty big security risk. Proceed with caution.
I have some folders in www/web/ which is the root.
It's the following folder: assets/exports/
And it contains a file export.xsl
When I do in javascript:
window.open('/assets/exports/export.xsl');
I'm going to the following link:
http://mywebsite/assets/exports/export.xsl
But I get a: 404 not found
Is symfony somehow protecting this link?
So, my question is, how can I access this file, so it starts downloading for the visitor?
From Symfony Documentation:
Keep in mind that web/ is a public directory and that anything stored here will be publicly accessible, including all the original asset files (e.g. Sass, LESS and CoffeeScript files).
Make sure you put the files in a proper directory: <symfony_root_dir>/web. See below.
Then accessing the http://mywebsite/assets/exports/export.xsl returns the file's content.
Check also your server configuration, virtual host config and read web server configuration guide from Symfony to see if you configured it properly.
I have a pre-compiled ember.js app (which fronted-js-framework shouldn't matter here), which basically consists of a folder with a index.html file, and a few js/css assets.
I placed this folder under /priv/static in my phoenix app, and tried to get the routing to serve it... without success so far. I'm on phoenix version 0.17.1 (same as 1.0 afaik). I tried the following steps, in that order:
In endpoint.ex, I removed the only: ~w(...) filter.
Implemented a bare minimum controller with a single action to serve the file:
def index(conn, _params) do
redirect conn, to: "/my_app/index.html"
end
added the controller to my routes.ex:
get "/my_app", MyCustomController, :index
None of the above steps worked so far, I only get the Error no route found for GET /my_app/index.html. How could I solve this Issue? I just want to map the URL "/my_app" (or, if nothing else works, "/my_app/index.html") to the path priv/static/my_app/index.html within my phoenix app. Any ideas?
EDIT:
The basic workflow I try to implement is the following:
I have different developers that build some ember.js SPAs in their dedicated folder, located in $phoenix_root/apps/. So I have a developer building $phoenix_root/apps/my_app with ember and ember-cli. This developer uses ember server while developing his app, and has mix phoenix.server running in the background, because the phoenix app itself exposes the required data as an RESTful API.
After each implemented feature, the frontend developer types ember build [...], this task compiles the whole ember.js frontend app into a single folder, with a index.html file and some assets, and moves this folder to $phoenix_root/web/static/assets/my_app. Then phoenix (or, brunch) triggers, and copies this stuff as-is to $phoenix_root/priv/static/my_app, ready to be served like any other asset.
The point is to be able to build a bunch of isolated "frontends" as self-contained packages within a single code base (the phoenix app), while the phoenix app itself has additional (other) stuff to do.
Because the Frontend-Developers auto-generate the SPA everytime, modifying the ever-new index.html file is something I highly want to avoid. Performance-wise it would be the best to just serve these SPAs as the static files they are - they initialize on their own inside the user's browser.
I hope this adds some clarification why I do this.
EDIT 2:
I have a working solution now, see the example repo I created for demonstration purposes: https://github.com/Anonyfox/Phoenix-Example-Multiple-SPA-Frontends
Necessary modifications to the phoenix app:
modify endpoint.ex' Plug.Static to include the SPAs and their assets.
restart mix phoenix.server after this!
Neccessary modifications to the ember.js apps:
add "output-path": "../../web/static/assets/*my_app*/" to .ember-cli, convenience setting to run ember build always with this path
add baseURL: '/*my_app*/' and locationType: 'none' to config/environment.js
rm -rf .git if you want to have all the code versioned within a single project (the purpose of this question)
Your setup should just work. There is only one caveat: every time you change something in lib, you must restart your application.
The only directory that is code reloaded on requests is web. In fact, that's the only difference between lib and web directories. That's why you put long running processes and supervisor in lib, because there is no need to code reload them, and everything else goes in web.
I think easiest way to replace web/templates/layout/app.html.eex with your index html and change assets path inside with <%= static_path(#conn, "/js/app.js") %> helpers to grab your ember app js file from static folder.
Router part:
scope "/", Chat do
pipe_through :browser
get "/", PageController, :index
end
And inside action render conn.
My application is running on Sinatra and deployed on my Apache web server using Passenger. My directory structure is as follows:
approot
` public
` css
- bootstrap.css
` uploads
- empty.txt
` tmp
- restart.txt
` views
- success.haml
- upload.haml
- config.ru
- myapp.rb
Inside upload.haml
%link(rel="stylesheet" href="css/bootstrap.css")
When I run this application on localhost:4567, the CSS loads just fine. However, when I deploy it on my web server, the CSS doesn't load.
On my web server, the application is accessed using: rubyapps.mydomain.com/appname
And if I type: rubyapps.mydomain.com/appname/css/bootstrap.css, I am able to see the contents of my CSS file just fine.
Totally confused, and not getting how Sinatra handles this situation, looking for a little help.
You might be running into the need to use Sinatra's URL helper.
For generating URLs you should use the url helper method, for instance, in Haml:
%a{:href => url('/foo')} foo
It takes reverse proxies and Rack routers into account, if present.
This method is also aliased to to (see below for an example).
Maybe this?
%link(rel="stylesheet" href="../public/css/bootstrap.css")
Or...
%link(rel="stylesheet" href="/css/bootstrap.css")