I'm using ember-cli with Firebase for my data. I also have a simple server file I created with http-mock that handles some processes for Twilio. Is there a way to use that http-mock as an actual server on Heroku? I have found an embercli stack for heroku but I'm not sure how to make that use the server file I have:
https://github.com/tonycoco/heroku-buildpack-ember-cli
Thank you in advance for the help.
I believe that build pack just deploys your app's static files to Heroku.
The http-mock file you're working with within Ember CLI is a Node Express app. So, you'd need to host it on a server that can serve node apps somewhere.
In theory you could write a script that does that (deploys it separately) while keeping it within your main repo, but like others have said that's probably not a good idea.
In the future, though, you probably will be able to use http-mocks both for clicking around your app with ember serve, and for use in your tests.
Related
I've already gotten my fair share of Bootstrap and Django but never tried out other frontend frameworks like Angular, React, etc. and finally wanted to try SvelteKit. So I'm really inexperienced and new with this sort of stuff.
Currently I've already set-up my Django project as well as a SvelteKit project by following the tutorial on their website.
My problem is that I'm confused about how to combine Django and SvelteKit now. Do I just run both servers simultaneously on different ports and get the data from Django JSON APIs into my Svelte frontend or is there some kind of approach to this? I thought that maybe there's a way to get my Django app to render the Svelte files from the Svelte server for me. I just feel really lost at the moment so if anyone could help me or has some resources I could read to get more familiar with the topic, since I didn't find a lot online, that'd be great!
Many thanks in advance!
First, understand the difference between Svelte and SvelteKit. SvelteKit is a front-end + server solution that is a layer above vanilla Svelte. SvelteKit adds things like routing and support for sever(less) functions.
If you want to use Django for all your server-side processing, you should just use (vanilla) Svelte to write independent web components that you call from html served by Django. No need to use SvelteKit if you aren't using any of the extra framework features.
How to write a web component with vanilla Svelte
How to write a web component with SvelteKit.
If you want to just write your API's in Django and do everything else from SvelteKit, I would run both Django and SvelteKit servers from different subdomains and/or ports. Like django.example.com and kit.example.com or example.com:8000 and example.com:3000.
SvelteKit also provides a low-level handle() hook that can bypass SvelteKit, but usually JS/node.js is still used. I think it would be tricky to pass a request from SvelteKit to Django.
I find myself having the same question, it's not perfect but I got it to work with the following:
Create a directory that will contain everything, e.g. my-project
Inside the directory create your Django project, e.g. django-svelte, with django-admin startproject django-svelte
From my-project/django-svelte create an app to contain the svelte app, e.g. frontend, with python manage.py startapp frontend
Inside frontend create two subdirectories templates and static; inside each of them create a frontend directory. (You should have frontend/templates/frontend and frontend/static/frontend in the end)
Inside my-project initialize a svelte-kit project, e.g. client, with npm init svelte client
Inside client install all packages and add #sveltejs/adapter-static with npm install and npm i -D #sveltejs/adapter-static
Replace the content of svelte.config.js with:
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
paths: { base: "/static/frontend" }, // Adjust according to where you collect static files and the name of the Django app
adapter: adapter({
pages: '../django-svelte/frontend/templates/frontend', // Adjust according to the name of the Django app
assets: '../django-svelte/frontend/static/frontend', // Adjust according to the name of the Django app
fallback: null,
precompress: false
}),
prerender: {
// This can be false if you're using a fallback (i.e. SPA mode)
default: true
}
}
};
This will write your HTML, JS and CSS files inside the frontend app.
Create a build with npm run build
Collect static files in Django with python manage.py collectstatic
Run Django with python manage.py runserver or other servers
I'm sure there are simpler ways though :-)
I made a simple template for svelte and django. please check this link: https://github.com/Pei2tech/svelte4django. What you need to add routing to support svelte instead of using sveltekit.
I'm using a deployed github repo project as a starting point for my own development project. Using ember-cli and ember serve I get a server running on localhost:4200. But it says
Proxying to https://xxxxx.yyy
where xxxxx.yyy is the website of the official deployed project, and the localhost:4200 server interacts with the deployed project's databases.
How do I tell ember to start a completely new local server that creates local empty databases, instead of proxying to the deployed website?
I tried ember build --environment=development, and it rebuilt, but it acts the same.
It sounds like you have a proxy configured in the .ember-cli file, as described in the guides. If you remove that property, Ember CLI should no longer use a proxy.
I am trying to reuse one webapp that's been open sourced a while ago that was written using some Django and ReactJS... Now I am a devops engineer so my skillset when it comes to JS and even Django are fairly limited so I am stuck .. My main problem is that this webapp can run just fine locally.. so I can start it and connect using http://localhost:8000 , but whenever I try and set it up on a server and make it "public" for the internal network it fails with accessing all the JS assets.
I know the problem comes with my webpack configs but I can't sort it out.. Been trying all day but I can't even find the proper documentation since it's using Webpack 2.5.
https://github.com/tsprasath/estate/tree/master/webpack
I am attaching the link to the webpack configs from the repo.. If anyone can at least point me to the right thing to look at, that would be helpful.
Thanks in advance!
I dont think its an issue with your webpack. You are trying to run your react app (which is at client side) from django server. I believe you will need to use some kind of middleware to let django know that it needs to use static files generated for react using webpack. I dont know exactly how its done, but same procedure is followed if react app needs to be served from node/express server.
Or see if this helps: https://github.com/nicholaskajoh/React-Django
When you create an ember-cli addon, you are supposed to be able to run a dummy app.
If a component need to access it's vendor folder you access "public/" in production.
While developping the ember app that use the addon you access :
app.options.project.nodeModulesPath + "/"+ this.name+"/vendor/"
However, when you run the ember-cli addon server (the dummy app) you need only "vendor/".
this.getEnv() will return developpement while developping an addon, or an app using the addon.
How can I, in index.js, differentiate app dev from addon dev ?
Suppose we are in the included hook, you can check this.isAddon() to determine where are you now. Say if you are in the consumer ember app now, you can then invoke path.dirname(require.resolve('ADDON_NAME/package.json')) to get the absolute path of your ember add-on.
One thing to notice, this.isAddon() might not a public API (though it's stable enough, it's still not listed in API doc). If you concerned about this, you can use this.parent.name() to achieve the same goal, when you run with the dummy app, this.parent.name() always returns dummy.
BTW, this.parent is the same thing as app.project where app is the first argument of included hook.
I am using reactjs for frontend and Django REST API for the backened. What is the best possible way to integrate both?
which of these two is a good option?
Running two servers for frontend and backend?
or
replacing django templates with reactjs?
Your help is highly appreciated.
Few options here
Django templates with react.
Not my preferred method. Essentially, you are blending django templating and jsx. The benefit here is low over head. It requires little configuration and allows you to write react and leverage the django templating language in the same file. If you need to get something up and running quickly, its a great solution. Have a look at this library https://github.com/Frojd/django-react-templatetags
Using django webpack loader
This will allow you to separate your react code from django code but still keep all your code to one repository. You need to configure django settings to find your react code. Then on your prod/dev server, have your web server point to the directory where your static react code lives or write a django url and view that will serve the react apps index file. It will be located in /static/ after you configure correctly and run python manage.py collectstatics. Benefits here are that it keeps the code to one repository but still isolates the python and javascript code. This is a middleground solution of the three. Quick note. You won't have react hot reload with this method for development. Here is the library that helps you configure this setup https://github.com/owais/django-webpack-loader
Having 2 separate applications
Similar to what you are doing right now, have a separate react repository, either served by a nodejs backend or deploy the code to a cdn service like amazon s3 and serve the one page app from there. And then as its counterpart, have your django app on a separate server with its consumable rest api (will need to configure allowed cors) . This method requires a lot of operational work: deploying, configuring, and management of 2 separate code bases. If you have the time and resources I do recommend this setup. The decoupling of the 2 apps allows this solution to scale the best
What do you mean two servers? You mean two projects/repositories?
Yes, you can keep frontend in the separate project. It make sence if you have multiple clients for your backend (like mobile apps and web). Different developers can have permission to edit only their repositories. Also it make sence if you are going to use some microservices structure for your project. But more simpliest way is to keep frontend and backed in the same project. Try to check some tutorial about Django+reactjs apps.