I am following the ember.js example on this site (http://todomvc.com/).
I clone this project to my computer and just double click index.html and
it runs, as what I expect.
But in ember's guide, it tells me to install the ember-cli, and create a new project, then build it.
ember new myapp
ember build
I can find my files in /dist, but when I double click the index.html
it fails.
This post said, "You have to serve your directory with an http server."
Why do I need a server to run this project, instead of just opening it in my browser?
The example that you linked is using the old global Ember. This is very different from ember-cli which you are now working with. An http server is required because of the <base> tag in the index.html file that specifies the base URL to use for all relative URLs contained within a document. So when your app is trying to serve up the assets/app.js or assets/vendor.js, its trying to look relative to this base url, which is defined in config/environment.js. It defaults to /. So you need a server to respond to the resource requests for the assets. Notice that your assets folder is relative to the index.html file
Related
So, I have a Nuxt 3 application where i make requests to an API through fetch.To facilitate maintenance, it's good that all paths are called dynamically from some variable or file, in case the API changes address. So, is there any way to define the path of requests in some file or database, that it's possible to change them after the build, in case the API changes address?
I defined all request addresses in an .env file, similar to this:
API_BASE_URL = http://adress:port/routes/base/
API_POST = http://adress:port/routes/post
API_GET_ITENS = http://adress:port/routes/get/
(etc)
That way, if the API is deployed on a different machine, I don't need to change all fetchs in code, just changing the value of the corresponding variable in .env. This works fine in the development environment.
However, when deploying the application it's necessary to build the project through npm build command, which generates a folder called .output with the project composed of .mjs files.
I didn't find any .env files in the built project. Apparently, it is not possible to change the environment variables after the build, being necessary to change before and build the project again.
I was expecting that after the build there would still be a file with the routes that could be changed, because after hand the system, the customer can change the API address without having to build and deploy the front again.
I have simple React application and I want to add SSR in Express.js.
I made a bit of a gaff in the beginning and in my repository I just have a frontend folder and in it the whole React app with typescript, babel and webpack configured.
I haven't played with SSR yet, so I'm curious, if I want to make such a server and have its file in the folder next to the frontend folder, would I have to install and set all the dependencies I made inside the`frontend folder, and only then create the server.js file ?
Then in the middle of "frontend/src" I would have 2 files - index.tsx (with React.render() method), because I would like to be able to run the application also without the server. And 2nd file would be indexServer.tsx with React.hydrate() method, which would go to server.js file (i.e. would be for generating application by server). Is this concept right ?
Link to my github repo with this react app: https://github.com/poldeeek/spider-game
If I want to make such a server and have its file in the folder next to the frontend folder, would I have to install and set all the dependencies I made inside the`frontend folder, and only then create the server.js file ?
You'll probably need to re-install all the dependencies if you choose to setup two separate folders like that. I would recommend putting server.js in frontend/server, which can then use the same node_modules as your frontend/src/index.js is using.
Then in the middle of "frontend/src" I would have 2 files - index.tsx (with React.render() method), because I would like to be able to run the application also without the server. And 2nd file would be indexServer.tsx with React.hydrate() method, which would go to server.js file (i.e. would be for generating application by server). Is this concept right ?
There is no right or wrong answer here. If this setup suits your needs, then go with it. The only challenge with this setup is that you have to configure babel and webpack to point to two different files: index.tsx (in case you don't want the server) and indexServer.tsx (in case you want to include the server).
I created an app with create-react-app and I'd like to log something in its server console. How could I do this?
I've tried adding index.js to the root folder and creating server folder, but it doesn't work.
Edit: I don't mean the backend server here, but just the frontend server. I'd like to print something in the same console where I type npm start. Is it possible?
If I understand correctly to do such a thing you should do eject your create-react-app otherwise you won't be able to modify the build scripts.
After the eject you can modify the webpack script or any other script you need to.
If you decide to do it, be careful because it will be more difficult to update your build dependencies.
First, you cannot put your backend code in the frontend code. Because the backend code is run by Node.JS enabled server. But the front end code is run by your browser.
All the react code will be bundled into one js file, which will be loaded by the browser. It will be simple JS files that renders views.
When you see localhost:3000 the server is given to you by default to VIEW and LOAD your front-end code. Most of the times it is webpack-dev-server.
The common options are:
1) If backend is REST/SOAP api then use XHR/ajax to hit the api. You just have to put the react generated JS file to your backend server's public folder. Also you can use completely different repos/codebases too in this approach.
2) You can use Server side rendering of sort where you put front end code in your backend views.
I'm new in using NPM. I wanted to load my project website in live server, but whenever I type live-server in the terminal, it only shows LISTING DIRECTORY (which is the list of all the files I have in my project website folder such as html, css, & script) instead of loading my project website. I tried to google it but found no answer. I don't know what to make sure or what to do about it.
If you don't specify a directory index somewhere (the default is a file named index.html) the server doesn't know what file you want to use as an entry point, so it'll just respond with a directory listing.
The docs say, you can add an index file by specifying the --entry-file command line parameter:
serve this file (server root relative) in place of missing files (useful for single page apps)
Just add the entry point to the startup script, by running
$ live-server --entry-point=PATH
Based on my understanding WebStorm has the concept of context Root ( basically the root of your project for source purposes) and Resource Roots folder(s) from which web requests can be resolved relative to.
I've got a project structure like
Projects (Context Root)
|
MyProject (ResourceRoot)
|--- html
|----css
|----images
I'd like to access my html files like so http://localhost:34343/html/index.html
however that's not possible. The only way I can access files is when the 'Projects' context root forms part of my url. e.g http://localhost:34343/Projects/html/index.html
(note that the resourceroot seems to be working to some extent as a I can omit the 'MyProject' part of the path.
I've got some css with absolute references that want to access /images which break when the context root has to be included. As far as I can tell moving the Context root 'down' a level isn't going to help as it will require 'MyProject' on the path.
I'm guessing I can probably force it to use something like apache where I can get more control of url resolution, but Ideally I'd use the built in server from the IDE.
http://localhost:63342/html/index.html -- you cannot have this kind of URL with built-in web server .. as IDE does not know what project to serve (as it works for ALL your projects a not only currently opened).
When built-in web server is in use, the URL has to have some hint (PROJECT_NAME) that would tell what project to serve (where to take files from).
Built-in web server supports 2 kind of URLs (both of them will serve the same file):
http://localhost:63342/PROJECT_NAME/index.html
http://PROJECT_NAME:63342/index.html
If you happy with 2nd URL, then you will have to do these steps:
Create Deployment entry (Settings/Preferences | Build, Execution, Deployment | Deployment) and mark it as Default for this project. The URL defined there (http://PROJECT_NAME:63342/) will be used when opening pages from within IDE.
This is required if you want to use Open in Browser functionality, otherwise you may safely skip it.
In your hosts file (or your local DNS server, if you have one) define an entry that would point PROJECT_NAME to your IP. For example (for hosts file): 127.0.0.1 PROJECT_NAME.